用CSS做出写轮眼变化图

最终效果如下

在抖音上刷到过一次写轮眼的变化视频，想试试CSS里的动画是否也能做出这种效果。我想到的做法是，将所有的写轮眼图片叠加放到一起。然后通过动画，将最上面的眼睛旋转并消失，第二只眼睛就显示出来了。

然后就是如何让眼睛之间的旋转消失衔接的更自然。我想到的是通过改变眼睛在动画不同时间点的状态，让前后的眼睛自然的衔接上。

10只眼睛，我一共设置了一个20秒的动画，每一只眼睛分配的时长是2秒钟。

接下来就是给每一只眼睛的动画进行时间节点的调整，每一段代码都差不多，就不一一列举了。

 @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;}}

用CSS做出写轮眼变化图相关推荐

HTML,CSS制作写轮眼开眼
背景图长这样子因为中间的过渡动画没办法截出来,只能贴上变化的画面,强烈建议看看因为全部代码太长,我分开贴出来 Html <!DOCTYPE html> <html>< ...
js + css 做出网易云音乐的轮播图
先说一下思路,网易云轮播图是这样的,每隔一段时间(这里运用到了js的定时器)右边的图片会放大(css的transform)并切换(定位的z-index)上来(这里还运用了过渡transition),最 ...
CSS 波浪效果动画波浪起伏水波动画 Pure CSS Wave 手把手教你用CSS做出波浪动画
文章目录前言设计思路图例完整代码细节&问题 1. 双伪元素 2.CSS并集选择器 2.position 前言最近在学习前端知识,在做背景的时候想弄一个椭圆的弧形,想到以前网上看 ...
css做出圆角矩形边框
无突出边框的: <html> <head> <title>用css做带圆角的边框</title> <meta http-equiv="c ...
通过div+css做出好看的横排导航栏
第一次写博客,希望大家支持,如果有什么不严谨或者写错的地方,望大家批评矫正.希望论坛大牛多指点,菜鸟一只,最近在学前端布局,因为自己刚学会的,所以分享出来给大家,希望对像我一样的菜鸟有所帮助! 1.首 ...
HTML+CSS做出3D照片效果（HTML+CSS for 3D photo effect）
2022.10.14大家好,我最近看到一个关于用HTML+CSS实现的3D照片觉得非常好看,如图: Hello everyone, I recently saw a 3D photo about us ...
小程序怎么用css做出与文字同行靠右的引导箭头？
引言不知道我这样没文采.含糊其词的标题能帮助多少人,因为我当时寻找答案的时候就是这样搜的,没搜到什么有用的信息,所以我以我想的问题做个解答,希望能帮到需要解决这个问题的小白~(小声bb-我是真正的小 ...
用html+css做出一个地下城游戏网站页面，新人练手推荐，带源码
如果你是一名DNF爱好者,恰好你又想学习做网站,那这个例子绝对是你不可错过的练习. 先上页面效果截图: 页面代码如下: <!DOCTYPE html> <html lang=&quo ...
用css做出好看的盒子阴影
// css .box{box-shadow: 0 16rpx 16rpx rgba(10, 16, 20, 0.24), 0 0 16rpx rgba(10, 16, 20, 0.12);text- ...

用CSS做出写轮眼变化图

用CSS做出写轮眼变化图相关推荐

最新文章

热门文章