用CSS做出写轮眼变化图 |
您所在的位置：网站首页 › 写轮眼所有样式 › 用CSS做出写轮眼变化图 |
用CSS做出写轮眼变化图
|
成品如下 在抖音上刷到过一次写轮眼的变化视频，想试试CSS里的动画是否也能做出这种效果。 我想到的做法是，将所有的写轮眼图片叠加放到一起。然后通过动画，将最上面的眼睛旋转并消失，第二只眼睛就显示出来了。 然后就是如何让眼睛之间的旋转消失衔接的更自然。我想到的是通过改变眼睛在动画不同时间点的状态，让前后的眼睛自然的衔接上。 10只眼睛，我一共设置了一个20秒的动画，每一只眼睛分配的时长是2秒钟。
接下来就是给每一只眼睛的动画进行时间节点的调整，每一段代码都差不多。代码如下 .a1{ position: relative; width: 600px; height: 300px; margin: 200px auto; background: url(../../../娱乐/做的玩/图片/佐助.jpg); transform: scale(1.4); } .box{ position: absolute; left: 235px; top: 95px; width: 130px; height: 130px; border-radius: 50%; overflow: hidden; } li{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; } li img{ width: 100%; height: 100%; } li:nth-child(1){ animation: move10 20s backwards infinite ;} li:nth-child(2){ animation: move9 20s backwards infinite ; } li:nth-child(3){ animation: move8 20s backwards infinite ; } li:nth-child(4){ animation: move7 20s backwards infinite ;} li:nth-child(5){ animation: move6 20s backwards infinite ;} li:nth-child(6){ animation: move5 20s backwards infinite ; } li:nth-child(7){ animation: move4 20s backwards infinite ; } li:nth-child(8){ animation: move3 20s backwards infinite ;} li:nth-child(9){animation: move2 20s backwards infinite; } li:nth-child(10){ animation: move 20s backwards infinite ; } @keyframes move{ 0%{ opacity: 1; } 5%{ transform: rotate(0deg); opacity: 1; } 8%{ transform: rotate(360deg); opacity: 0; } 100%{ opacity: 0; } } @keyframes move2{ 15%{ transform: rotate(0deg); opacity: 1; } 18%{ transform: rotate(360deg); opacity: 0; } 100%{ opacity: 0; } } @keyframes move3{ 25%{ transform: rotate(0deg); opacity: 1; } 28%{ transform: rotate(360deg); opacity: 0; } 100%{ opacity: 0; } } @keyframes move4{ 35%{ transform: rotate(0deg); opacity: 1; } 38%{ transform: rotate(360deg); opacity: 0; } 100%{ opacity: 0; } } @keyframes move5{ 45%{ transform: rotate(0deg); opacity: 1; } 48%{ transform: rotate(360deg); opacity: 0; } 100%{ opacity: 0; } } @keyframes move6{ 55%{ transform: rotate(0deg); opacity: 1; } 58%{ transform: rotate(360deg); opacity: 0; } 100%{ opacity: 0; } } @keyframes move7{ 65%{ transform: rotate(0deg); opacity: 1; } 68%{ transform: rotate(360deg); opacity: 0; } 100%{ opacity: 0; } } @keyframes move8{ 75%{ transform: rotate(0deg); opacity: 1; } 78%{ transform: rotate(360deg); opacity: 0; } 100%{ opacity: 0; } } @keyframes move9{ 85%{ transform: rotate(0deg); opacity: 1; } 88%{ transform: rotate(360deg); opacity: 0; } 100%{ opacity: 0; } } @keyframes move10{ 95%{ transform: rotate(0deg); opacity: 1; } 100%{ transform: rotate(360deg); opacity: 1; } } |
【本文地址】
今日新闻 |
推荐新闻 |