<!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>
1300
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
