不一样的纯H5C3动画爱心
最近抖音很火的让你会计算机的朋友给你做个爱心突然火了，我也不出意外的收到了朋友的邀请，自己做肯定太麻烦了于是乎百度第一步，惊呆了！网上全都是一个爱心，变着法的火焰爱心，换汤不换药，那我们肯定是要整点不一样的咯
首先要表达出我们的中心，是个爱心，其次是简单，再加点动画过渡大功告成！朋友后面跟我得瑟说别人的爱心都一样，还以为我们只能做一种爱心哈哈哈，虽然没有那个炫酷，但这是咱手工打造的“不撞衫”嘛
<html> <head> <style> * { margin: 0; padding: 0; color: #FFF; } html, body { width: 100%; height: 100%; } body { background: linear-gradient(to top, #09203f 0%, #537895 100%); } .box { position: absolute; top: 200px; right: 0; left: 0; margin: auto; width: 300px; height: 300px; } h1 { text-align: center; } .heart { position: relative; font-size: 0; width: 138px; margin: 50px auto; } .heart>div { position: absolute; top: -5px; width: 10px; height: 10px; border-radius: 5px; } .h-line-4 { animation: h-line-move-4 3.8s infinite; } .h-line-3, .h-line-5 { animation: h-line-move-3 3.8s infinite; } .h-line-2, .h-line-6 { animation: h-line-move-2 3.8s infinite; } .h-line-1, .h-line-7 { animation: h-line-move-1 3.8s infinite; } .h-line-0, .h-line-8 { animation: h-line-move-0 3.8s infinite; } .h-line-0 { left: 0px; animation-delay: 0s; background-color: #3cba92; filter: hue-rotate(20deg); } .h-line-1 { left: 17px; animation-delay: 0.15s; background-color: #3cba92; filter: hue-rotate(40deg); } .h-line-2 { left: 34px; animation-delay: 0.3s; background-color: #3cba92; filter: hue-rotate(60deg); } .h-line-3 { left: 51px; animation-delay: 0.45s; background-color: #3cba92; filter: hue-rotate(80deg); } .h-line-4 { left: 68px; animation-delay: 0.6s; background-color: #3cba92; filter: hue-rotate(100deg); } .h-line-5 { left: 85px; animation-delay: 0.75s; background-color: #3cba92; filter: hue-rotate(120deg); } .h-line-6 { left: 102px; animation-delay: 0.9s; background-color: #3cba92; filter: hue-rotate(140deg); } .h-line-7 { left: 119px; animation-delay: 1.05s; background-color: #3cba92; filter: hue-rotate(160deg); } .h-line-8 { left: 136px; animation-delay: 1.2s; background-color: #3cba92; filter: hue-rotate(180deg); } @keyframes h-line-move-4 { 0%, 10%, 90%, 100% { height: 10px; top: -5px; } 45%, 55% { height: 94px; top: -23px; } } @keyframes h-line-move-3 { 0%, 10%, 90%, 100% { height: 10px; top: -5px; } 45%, 55% { height: 90px; top: -31px; } } @keyframes h-line-move-2 { 0%, 10%, 90%, 100% { height: 10px; top: -5px; } 45%, 55% { height: 80px; top: -37px; } } @keyframes h-line-move-1 { 0%, 10%, 90%, 100% { height: 10px; top: -5px; } 45%, 55% { height: 60px; top: -31px; } } @keyframes h-line-move-0 { 0%, 10%, 90%, 100% { height: 10px; top: -5px; } 45%, 55% { height: 30px; top: -15px; } } </style> </head> <body> <div class="box"> <h1>为爱冲锋的勇士！<br />值得所有人尊重！</h1> <div class="heart"> <div class="h-line-0"></div> <div class="h-line-1"></div> <div class="h-line-2"></div> <div class="h-line-3"></div> <div class="h-line-4"></div> <div class="h-line-5"></div> <div class="h-line-6"></div> <div class="h-line-7"></div> <div class="h-line-8"></div> </div> </div> </body> </html>
看成品
