介绍
这篇文章主要介绍怎么使用CSS和GSAP实现有多个关键帧的连续动画,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
效果预览
源代码下载https://github.com/comehope/front-end-daily-challenges
代码解读
定义dom,容器中包含10个<代码> p> p> 元素:
& lt;图类=癱ontainer"比;
& lt; div> & lt; span> & lt;/span> & lt;/div>
& lt; div> & lt; span> & lt;/span> & lt;/div>
& lt; div> & lt; span> & lt;/span> & lt;/div>
& lt; div> & lt; span> & lt;/span> & lt;/div>
& lt; div> & lt; span> & lt;/span> & lt;/div>
& lt; div> & lt; span> & lt;/span> & lt;/div>
& lt; div> & lt; span> & lt;/span> & lt;/div>
& lt; div> & lt; span> & lt;/span> & lt;/div>
& lt; div> & lt; span> & lt;/span> & lt;/div>
& lt; div> & lt; span> & lt;/span> & lt;/div>
& lt;/figure> 居中显示:
身体{
保证金:0;
身高:100 vh;
显示:flex;
对齐项目:中心;
justify-content:中心;
背景颜色:浅黄色;
} 定义容器的尺寸和样式:
。容器{
宽度:400 px;
身高:400 px;
背景:线性渐变(45度、番茄、黄金);
这个特性:3%;
不必:0 0 10 px rgba (0, 0, 0, 0.3);
} 画出容器里的1个元素,它有一个外壳<代码> p> 时间> 。容器{
位置:相对;
}
.container p {
位置:绝对的;
宽度:继承;
高度:继承;
显示:flex;
对齐项目:中心;
justify-content:中心;
}
.container p{跨度
位置:绝对的;
宽度:40像素;
高度:40像素;
背景颜色:白色;
} 为容器中的元素定义下标变量,并让元素的外壳依次旋转,围合成一个圆形,其中<代码>大纲> 。容器p {
提纲:1 px冲黑;
变换:旋转(calc ((var (- n) - 1) * 36度));
}
.container p: nth-child (1) {——n: 1;}
.container p: nth-child (2) {——n: 2;}
.container p: nth-child (3) {——n: 3;}
.container p: nth-child (4) {——n: 4;}
.container p: nth-child (5) {——n: 5;}
.container p: nth-child (6) {——n: 6;}
.container p: nth-child (7) {——n: 7;}
.container p: nth-child (8) {——n: 8;}
.container p: nth-child (9) {——n: 9;}
.container p: nth-child (10) {——n: 10;} 至,此子元素绘制完成,接下来开始写动画脚本。
引入GSAP库:
& lt;脚本https://www.yisu.com/zixun/src=" https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js "> 定义一个变量,代表子元素选择器:
=& # 39;让元素。容器p跨度# 39;; 声明一个时间线对象:
让动画=new TimelineMax (); 先设定入场方式为由小(第1帧)变大(第2帧),其中并没有第2帧的代码,它是隐含在语义中的:
animation.from(元素、1{规模:0}); 让子元素变成竖长条,向四周散开(第3帧):
animation.from(元素、1{规模:0})
文(元素、1 {y: & # 39; -100 px # 39;, scaleX: 0.25}); 让竖长条旋转着变成小方块(第4帧):
animation.from(元素、1{规模:0})
文(元素、1 {y: & # 39; -100 px # 39;, scaleX: 0.25})
文(元素,1,{写入scaleY: 0.25,旋转:180}); 让小方块变成横长条,围成一个圆形(第5帧):
animation.from(元素、1{规模:0})
文(元素、1 {y: & # 39; -100 px # 39;, scaleX: 0.25})
文(元素,1,{写入scaleY: 0.25,旋转:180})
文(元素,1,{scaleX: 1}); 注意,因scrimba在录制过多帧时会崩溃,所以第6帧至第11帧没有在视频中体现。
让圆形向内收敛,同时线条变细(第6帧):
animation.from(元素、1{规模:0})
文(元素、1 {y: & # 39; -100 px # 39;, scaleX: 0.25})
文(元素,1,{写入scaleY: 0.25,旋转:180})
文(元素,1,{scaleX: 1})
文(元素、1 {y: & # 39; -60 px # 39;,写入scaleY: 0.1});
