Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Thanks!
css
*, *:before, *:after { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-font-feature-settings: "liga", "kern"; font-feature-settings: "liga", "kern"; overflow-y: scroll; overflow-x: hidden; height: 100%; } body { overflow: hidden; height: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background: #1dd2af; background: -webkit-linear-gradient(240deg, #E03BE7, #F04151); background: linear-gradient(-150deg, #E03BE7, #F04151); } svg { height: 100%; width: 100%; -webkit-tap-highlight-color: transparent; } .container { position: relative; height: 50%; width: 50vh; background: white; border-radius: 10px; box-shadow: 0 0 10px rgba(25, 25, 25, 0.25); } @-webkit-keyframes heart { 0% { -webkit-transform: scale(1); transform: scale(1); } 17.5% { -webkit-transform: scale(0.5); transform: scale(0.5); } } @keyframes heart { 0% { -webkit-transform: scale(1); transform: scale(1); } 17.5% { -webkit-transform: scale(0.5); transform: scale(0.5); } } #Heart_2_ { cursor: pointer; will-change: transform; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: heart 1.8s cubic-bezier(0.17, 0.89, 0.32, 1.49); animation: heart 1.8s cubic-bezier(0.17, 0.89, 0.32, 1.49); } @-webkit-keyframes fadeInDown { to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes fadeInDown { to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } #Thanks { position: absolute; top: 65%; left: 0; right: 0; text-align: center; font-family: 'Montserrat', sans-serif; color: #13414c; font-size: 5vh; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); opacity: 0; -webkit-animation: fadeInDown 1s ease-out; animation: fadeInDown 1s ease-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: 1.8s; animation-delay: 1.8s; } @-webkit-keyframes bubble { 0%,100% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; stroke-width: 0; stroke: rgba(233, 172, 193, 0); } 15% { fill: #E9ACC1; } 50% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; stroke: #E9ACC1; stroke-width: 6; } 100% { fill: rgba(233, 172, 193, 0); } } @keyframes bubble { 0%,100% { -webkit-transform: scale(0); transform: scale(0); opacity: 0; stroke-width: 0; stroke: rgba(233, 172, 193, 0); } 15% { fill: #E9ACC1; } 50% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; stroke: #E9ACC1; stroke-width: 6; } 100% { fill: rgba(233, 172, 193, 0); } } #Circle { fill: #E9ACC1; will-change: transform; -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-animation: bubble 1.8s cubic-bezier(0.21, 0.61, 0.35, 1); animation: bubble 1.8s cubic-bezier(0.21, 0.61, 0.35, 1); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } @-webkit-keyframes particle { 0%,100% { opacity: 0; } 40% { -webkit-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); } 80% { opacity: 1; } 100% { -webkit-transform: translate(0, 0) scale(0); transform: translate(0, 0) scale(0); } } @keyframes particle { 0%,100% { opacity: 0; } 40% { -webkit-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); } 80% { opacity: 1; } 100% { -webkit-transform: translate(0, 0) scale(0); transform: translate(0, 0) scale(0); } } [id*=Particle] { will-change: transform; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; opacity: 0; -webkit-animation: particle 2.7s cubic-bezier(0.21, 0.61, 0.35, 1); animation: particle 2.7s cubic-bezier(0.21, 0.61, 0.35, 1); -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-delay: 0.45s; animation-delay: 0.45s; } [id*=Particle]:nth-child(1) { -webkit-animation-duration: 1084ms; animation-duration: 1084ms; } [id*=Particle]:nth-child(2) { -webkit-animation-duration: 1095ms; animation-duration: 1095ms; } [id*=Particle]:nth-child(3) { -webkit-animation-duration: 1142ms; animation-duration: 1142ms; } [id*=Particle]:nth-child(4) { -webkit-animation-duration: 1535ms; animation-duration: 1535ms; } [id*=Particle]:nth-child(5) { -webkit-animation-duration: 1309ms; animation-duration: 1309ms; } [id*=Particle]:nth-child(6) { -webkit-animation-duration: 1929ms; animation-duration: 1929ms; } [id*=Particle]:nth-child(7) { -webkit-animation-duration: 1347ms; animation-duration: 1347ms; } [id*=Particle]:nth-child(8) { -webkit-animation-duration: 1310ms; animation-duration: 1310ms; } [id*=Particle]:nth-child(9) { -webkit-animation-duration: 1171ms; animation-duration: 1171ms; } [id*=Particle]:nth-child(10) { -webkit-animation-duration: 1920ms; animation-duration: 1920ms; } [id*=Particle]:nth-child(11) { -webkit-animation-duration: 1279ms; animation-duration: 1279ms; } [id*=Particle]:nth-child(12) { -webkit-animation-duration: 1727ms; animation-duration: 1727ms; } [id*=Particle]:nth-child(13) { -webkit-animation-duration: 1390ms; animation-duration: 1390ms; } [id*=Particle]:nth-child(14) { -webkit-animation-duration: 1724ms; animation-duration: 1724ms; } [id*=Particle]:nth-child(15) { -webkit-animation-duration: 1285ms; animation-duration: 1285ms; } [id*=Particle]:nth-child(16) { -webkit-animation-duration: 1855ms; animation-duration: 1855ms; } [id*=Particle]:nth-child(17) { -webkit-animation-duration: 1317ms; animation-duration: 1317ms; } [id*=Particle]:nth-child(18) { -webkit-animation-duration: 1460ms; animation-duration: 1460ms; } [id*=Particle]:nth-child(1) { -webkit-transform: translate(500%, 500%) scale(0); transform: translate(500%, 500%) scale(0); } [id*=Particle]:nth-child(2) { -webkit-transform: translate(250%, 500%) scale(0); transform: translate(250%, 500%) scale(0); } [id*=Particle]:nth-child(3) { -webkit-transform: translate(0, 500%) scale(0); transform: translate(0, 500%) scale(0); } [id*=Particle]:nth-child(4) { -webkit-transform: translate(-250%, 500%) scale(0); transform: translate(-250%, 500%) scale(0); } [id*=Particle]:nth-child(5) { -webkit-transform: translate(-500%, 500%) scale(0); transform: translate(-500%, 500%) scale(0); } [id*=Particle]:nth-child(6) { -webkit-transform: translate(-500%, 250%) scale(0); transform: translate(-500%, 250%) scale(0); } [id*=Particle]:nth-child(7) { -webkit-transform: translate(-500%, 0%) scale(0); transform: translate(-500%, 0%) scale(0); } [id*=Particle]:nth-child(8) { -webkit-transform: translate(-500%, -250%) scale(0); transform: translate(-500%, -250%) scale(0); } [id*=Particle]:nth-child(9) { -webkit-transform: translate(-500%, -500%) scale(0); transform: translate(-500%, -500%) scale(0); } [id*=Particle]:nth-child(10) { -webkit-transform: translate(-250%, -500%) scale(0); transform: translate(-250%, -500%) scale(0); } [id*=Particle]:nth-child(11) { -webkit-transform: translate(0%, -500%) scale(0); transform: translate(0%, -500%) scale(0); } [id*=Particle]:nth-child(12) { -webkit-transform: translate(250%, -500%) scale(0); transform: translate(250%, -500%) scale(0); } [id*=Particle]:nth-child(13) { -webkit-transform: translate(500%, -500%) scale(0); transform: translate(500%, -500%) scale(0); } [id*=Particle]:nth-child(14) { -webkit-transform: translate(500%, -250%) scale(0); transform: translate(500%, -250%) scale(0); } [id*=Particle]:nth-child(15) { -webkit-transform: translate(500%, 0%) scale(0); transform: translate(500%, 0%) scale(0); } [id*=Particle]:nth-child(16) { -webkit-transform: translate(500%, 250%) scale(0); transform: translate(500%, 250%) scale(0); } [id*=Particle]:nth-child(17) { -webkit-transform: translate(500%, 500%) scale(0); transform: translate(500%, 500%) scale(0); } [id*=Particle]:nth-child(18) { -webkit-transform: translate(500%, 500%) scale(0); transform: translate(500%, 500%) scale(0); }
JavaScript
function addListener() { var btn = document.querySelector('#Heart_2_'); btn.addEventListener("click", restart, false); } function restart() { var container = document.querySelector('#Layer_1'); var newContainer = container.cloneNode(true); container.parentNode.replaceChild(newContainer, container); addListener(); } addListener();
粒子
时间
文字
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号