按钮荡开波浪

来源：互联网发布：linux启动tomcat报错编辑：程序博客网时间：2024/05/16 19:49
<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta name="description" content="">    <meta name="author" content="">    <title>Home</title></head><style>.smartBtn{position: absolute; line-height: 30px;text-align: center;font-size: 16px;background:#fcc800;color:#495152;border:1px solid #fff;border-radius:8px;letter-spacing:1px;z-index:999;left:50px;top:20px;padding:0 6px;}.smartBtn::before{content: '';position: absolute;width: 100%;height: 100%;line-height: 40px;top: -1px;left: -1px; margin-top: 1px;  border: 1px solid red;border-radius:8px;-webkit-animation:mainOneBtn 2s  infinite ease-in-out;  -moz-animation:mainOneBtn 2s  infinite ease-in-out; -ms-animation:mainOneBtn 2s  infinite ease-in-out;-o-animation:mainOneBtn 2s  infinite ease-in-out;  animation:mainOneBtn 2s  infinite ease-in-out;}@keyframes mainOneBtn{  0%{width: 100%;height: 100%;left: -1px;top:-1px;opacity: 1; }  100%{width: 130%;height: 200%;left: -15%;top:-20px;opacity: 0;}}@-webkit-keyframes mainOneBtn{  0%{width: 100%;height: 100%;left: -1px;top:-1px;opacity: 1; }  100%{width: 130%;height: 200%;left: -15%;top:-20px;opacity: 0;}}@-moz-keyframes mainOneBtn{  0%{width: 100%;height: 100%;left: -1px;top:-1px;opacity: 1;}  100%{width: 130%;height: 200%;left: -15%;top:-20px;opacity: 0;}}</style><body><div id="smartBtn" class="smartBtn">智能按钮</div></body></html>
0 0