Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
67 BPM
css
.bg { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; height: 100%; width: 100%; background: #fab49b; -ms-flex-pack: distribute; justify-content: space-around; color: #fff; } .watch { position: absolute; top: 50%; -webkit-transform: translateX(-21.15%) translateY(-49.75%); transform: translateX(-21.15%) translateY(-49.75%); } .screen { -webkit-transform: scale(0.4); transform: scale(0.4); width: 272px; height: 340px; margin: auto; position: relative; position: relative; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: #9e243e; } .heart { margin: 0 auto; display: block; position: absolute; top: 120px; left: 0; right: 0; width: 66%; opacity: 0.95; -webkit-animation: beat 1.2s ease-in-out infinite forwards; animation: beat 1.2s ease-in-out infinite forwards; } .bpm { font-size: 40px; letter-spacing: 0.1em; font-family: rift-soft, sans-serif; color: #ffe1dd; opacity: 1; z-index: 100; position: relative; text-align: center; top: 55px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .shadow { width: 20px; height: 20px; margin: -10px 0 0 -10px; top: 50%; left: 50%; border-radius: 100px; -webkit-box-shadow: 0 0 200px 60px rgba(70, 0, 44, 0.6); box-shadow: 0 0 200px 60px rgba(70, 0, 44, 0.6); position: absolute; z-index: 0; -webkit-animation: beat-shadow 1.2s ease-in-out infinite forwards; animation: beat-shadow 1.2s ease-in-out infinite forwards; } .tick { width: 10px; height: 10px; background: #ff6c5e; opacity: 0.6; border-radius: 100%; position: absolute; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tick:nth-of-type(1) { top: 20px; left: 126px; -webkit-animation: tock 12s ease-out 0s infinite forwards; animation: tock 12s ease-out 0s infinite forwards; } .tick:nth-of-type(2) { top: 50px; right: 60px; -webkit-animation: tock 12s ease-out 1s infinite forwards; animation: tock 12s ease-out 1s infinite forwards; } .tick:nth-of-type(3) { top: 100px; right: 25px; -webkit-animation: tock 12s ease-out 2s infinite forwards; animation: tock 12s ease-out 2s infinite forwards; } .tick:nth-of-type(4) { top: 165px; right: 10px; -webkit-animation: tock 12s ease-out 3s infinite forwards; animation: tock 12s ease-out 3s infinite forwards; } .tick:nth-of-type(5) { bottom: 90px; right: 25px; -webkit-animation: tock 12s ease-out 4s infinite forwards; animation: tock 12s ease-out 4s infinite forwards; } .tick:nth-of-type(6) { bottom: 45px; right: 60px; -webkit-animation: tock 12s ease-out 5s infinite forwards; animation: tock 12s ease-out 5s infinite forwards; } .tick:nth-of-type(7) { bottom: 20px; right: 126px; opacity: 1; background: #ffd0cb; } .tick:nth-of-type(8) { bottom: 45px; left: 60px; -webkit-animation: tock 12s ease-out 7s infinite forwards; animation: tock 12s ease-out 7s infinite forwards; } .tick:nth-of-type(9) { bottom: 90px; left: 25px; -webkit-animation: tock 12s ease-out 8s infinite forwards; animation: tock 12s ease-out 8s infinite forwards; } .tick:nth-of-type(10) { top: 165px; left: 10px; -webkit-animation: tock 12s ease-out 9s infinite forwards; animation: tock 12s ease-out 9s infinite forwards; } .tick:nth-of-type(11) { top: 100px; left: 25px; -webkit-animation: tock 12s ease-out 10s infinite forwards; animation: tock 12s ease-out 10s infinite forwards; } .tick:nth-of-type(12) { top: 50px; left: 60px; -webkit-animation: tock 12s ease-out 11s infinite forwards; animation: tock 12s ease-out 11s infinite forwards; } .tick:nth-of-type(1), .tick:nth-of-type(4), .tick:nth-of-type(7), .tick:nth-of-type(10) { width: 20px; height: 20px; } @-webkit-keyframes beat { 0%, 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 15%, 45% { -webkit-transform: scale3d(1.225, 1.225, 1); transform: scale3d(1.225, 1.225, 1); } 35% { -webkit-transform: scale3d(1.15, 1.15, 1); transform: scale3d(1.15, 1.15, 1); } 65% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes beat { 0%, 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 15%, 45% { -webkit-transform: scale3d(1.225, 1.225, 1); transform: scale3d(1.225, 1.225, 1); } 35% { -webkit-transform: scale3d(1.15, 1.15, 1); transform: scale3d(1.15, 1.15, 1); } 65% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-webkit-keyframes beat-shadow { 0%, 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 15%, 45% { -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); } 30%, 60% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes beat-shadow { 0%, 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 15%, 45% { -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); } 30%, 60% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-webkit-keyframes tock { 0%, 2% { opacity: 0.95; background: #ffd0cb; } 10%, 100% { opacity: 0.6; background: #ff6c5e; } } @keyframes tock { 0%, 2% { opacity: 0.95; background: #ffd0cb; } 10%, 100% { opacity: 0.6; background: #ff6c5e; } }
JavaScript
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>概念手表-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号