经验总结

  1. 首页 > 生活 > >

不一样的纯H5C3动画爱心

生活百科

最近抖音很火的让你会计算机的朋友给你做个爱心突然火了，我也不出意外的收到了朋友的邀请，自己做肯定太麻烦了于是乎百度第一步，惊呆了！网上全都是一个爱心，变着法的火焰爱心，换汤不换药，那我们肯定是要整点不一样的咯
【不一样的纯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>看成品

不一样的纯H5C3动画爱心

文章插图

不一样的纯H5C3动画爱心

文章插图

    经验总结扩展阅读


    上一篇：2023年9月6日进棺材行吗 2023年农历七月廿二进棺材吉日

    下一篇：冰的熔点是多少