前端每日实战：133# 视频演示如何用 CSS 和 GSAP 创作有多个关键帧的连续动画

keke 发布于2019-08-23 11:55 / 2706人阅读

摘要：效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。隐藏容器外的内容，并删掉辅助线最后，装饰一下页面的角落大功告成

效果预览

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。

https://codepen.io/comehope/pen/eLMKJG

可交互视频

此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/p/pEgDAM/cdDRmH9

源代码下载

每日前端实战系列的全部源代码请从 github 下载：

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom，容器中包含 10 个 div 子元素，每个 div 中包含 1 个 span 元素：

</>复制代码

居中显示：

</>复制代码 
body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: lightyellow;
}

定义容器的尺寸和样式：

</>复制代码 
.container {
    width: 400px;
    height: 400px;
    background: linear-gradient(45deg, tomato, gold);
    border-radius: 3%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

画出容器里的 1 个元素，它有一个外壳 div，里面是一个白色的小方块 span：

</>复制代码 
.container {
    position: relative;
}
.container div {
    position: absolute;
    width: inherit;
    height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}
.container div span {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: white;
}

为容器中的元素定义下标变量，并让元素的外壳依次旋转，围合成一个圆形，其中 outline 是辅助线：

</>复制代码 
.container div {
    outline: 1px dashed black;
    transform: rotate(calc((var(--n) - 1) * 36deg));
}
.container div:nth-child(1) { --n: 1; }
.container div:nth-child(2) { --n: 2; }
.container div:nth-child(3) { --n: 3; }
.container div:nth-child(4) { --n: 4; }
.container div:nth-child(5) { --n: 5; }
.container div:nth-child(6) { --n: 6; }
.container div:nth-child(7) { --n: 7; }
.container div:nth-child(8) { --n: 8; }
.container div:nth-child(9) { --n: 9; }
.container div:nth-child(10) { --n: 10; }

至此，子元素绘制完成，接下来开始写动画脚本。
引入 GSAP 库：

</>复制代码

定义一个变量，代表子元素选择器：

</>复制代码 
let elements = ".container div span";

声明一个时间线对象：

</>复制代码 
let animation = new TimelineMax();

先设定入场方式为由小（第1帧）变大（第2帧），其中并没有第 2 帧的代码，它是隐含在语义中的：

</>复制代码 
animation.from(elements, 1, {scale: 0});

让子元素变成竖长条，向四周散开（第3帧）：

</>复制代码 
animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: "-100px", scaleX: 0.25});

让竖长条旋转着变成小方块（第4帧）：

</>复制代码 
animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: "-100px", scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180});

让小方块变成横长条，围成一个圆形（第5帧）：

</>复制代码 
animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: "-100px", scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1});

注意，因 scrimba 在录制过多帧时会崩溃，所以第 6 帧至第 11 帧没有在视频中体现。
让圆形向内收敛，同时线条变细（第6帧）：

</>复制代码 
animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: "-100px", scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: "-60px", scaleY: 0.1});

让线条向左摆动（第7帧）：

</>复制代码 
animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: "-100px", scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: "-60px", scaleY: 0.1})
    .to(elements, 1, {x: "-30px"});

再让线条向右摆动（第8帧）：

</>复制代码 
animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: "-100px", scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: "-60px", scaleY: 0.1})
    .to(elements, 1, {x: "-30px"})
    .to(elements, 1, {x: "30px"});

再把横线变为竖线，造型与第 3 帧相似，只是线更细，更向内收敛（第9帧）：

</>复制代码 
animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: "-100px", scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: "-60px", scaleY: 0.1})
    .to(elements, 1, {x: "-30px"})
    .to(elements, 1, {x: "30px"})
    .to(elements, 1, {x: "0", scaleX: 0.1, scaleY: 1});

再把竖线变为横线，造型与第 5 帧相似，但线短一些（第10帧）：

</>复制代码 
animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: "-100px", scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: "-60px", scaleY: 0.1})
    .to(elements, 1, {x: "-30px"})
    .to(elements, 1, {x: "30px"})
    .to(elements, 1, {x: "0", scaleX: 0.1, scaleY: 1})
    .to(elements, 1, {scaleX: 0.5, scaleY: 0.1})

横线稍向外扩散，变为圆点（第11帧）：

</>复制代码 
animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: "-100px", scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: "-60px", scaleY: 0.1})
    .to(elements, 1, {x: "-30px"})
    .to(elements, 1, {x: "30px"})
    .to(elements, 1, {x: "0", scaleX: 0.1, scaleY: 1})
    .to(elements, 1, {scaleX: 0.5, scaleY: 0.1})
    .to(elements, 1, {y: "-80px", scaleY: 0.5, borderRadius: "50%"});

让圆点变形为竖线，并向内收缩，这个变化的距离长，所以动画时间也要长一些（第12帧）：

</>复制代码 
animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: "-100px", scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: "-60px", scaleY: 0.1})
    .to(elements, 1, {x: "-30px"})
    .to(elements, 1, {x: "30px"})
    .to(elements, 1, {x: "0", scaleX: 0.1, scaleY: 1})
    .to(elements, 1, {scaleX: 0.5, scaleY: 0.1})
    .to(elements, 1, {y: "-80px", scaleY: 0.5, borderRadius: "50%"})
    .to(elements, 1, {y: "-10px", scaleX: 0.1, scaleY: 0.5, borderRadius: "0%", rotation: 0});

让竖线从中心向外快速扩散，扩散前稍停片刻，好像线条都被发射出一样（第13帧）：

</>复制代码 
animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: "-100px", scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: "-60px", scaleY: 0.1})
    .to(elements, 1, {x: "-30px"})
    .to(elements, 1, {x: "30px"})
    .to(elements, 1, {x: "0", scaleX: 0.1, scaleY: 1})
    .to(elements, 1, {scaleX: 0.5, scaleY: 0.1})
    .to(elements, 1, {y: "-80px", scaleY: 0.5, borderRadius: "50%"})
    .to(elements, 1, {y: "-10px", scaleX: 0.1, scaleY: 0.5, borderRadius: "0%", rotation: 0})
    .to(elements, 1, {y: "-300px", delay: 0.5});

用时间尺度缩放函数让动画播放速度加快一倍：

</>复制代码 
animation.from(elements, 1, {scale: 0})
    .to(elements, 1, {y: "-100px", scaleX: 0.25})
    .to(elements, 1, {scaleY: 0.25, rotation: 180})
    .to(elements, 1, {scaleX: 1})
    .to(elements, 1, {y: "-60px", scaleY: 0.1})
    .to(elements, 1, {x: "-30px"})
    .to(elements, 1, {x: "30px"})
    .to(elements, 1, {x: "0", scaleX: 0.1, scaleY: 1})
    .to(elements, 1, {scaleX: 0.5, scaleY: 0.1})
    .to(elements, 1, {y: "-80px", scaleY: 0.5, borderRadius: "50%"})
    .to(elements, 1, {y: "-10px", scaleX: 0.1, scaleY: 0.5, borderRadius: "0%", rotation: 0})
    .to(elements, 1, {y: "-300px", delay: 0.5})
    .timeScale(2);

修改声明时间线的代码，使动画重复播放：

</>复制代码 
let animation = new TimelineMax({repeat: -1, repeatDelay: 1});

至此，动画完成。
隐藏容器外的内容，并删掉辅助线；

</>复制代码 
.container {
    overflow: hidden;
}
.container div {
    /* outline: 1px dashed black; */
}

最后，装饰一下页面的角落：

</>复制代码 
body {
    overflow: hidden;
}
body::before,
body::after {
    content: "";
    position: absolute;
    width: 60vmin;
    height: 60vmin;
    border-radius: 50%;
    background: radial-gradient(
        transparent 25%,
        gold 25%, gold 50%,
        tomato 50%
    );
}
body::before {
    left: -30vmin;
    bottom: -30vmin;
}
body::after {
    right: -30vmin;
    top: -30vmin;
}

大功告成！

云服务器 GPU云服务器如何用css 如何用vue开发实时音视频如何用云服务器和虚拟主机赚钱 html和css有什么区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97681.html

前端每日实战 2018 年 9 月份项目汇总（共 26 个项目）

摘要：过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，是学习前端开发的活的参考书过往项目 2018 年 8 月份项目汇总（共 29 个项目） 2018 年 7 月份项目汇总（共 29 个项目） 2018 年 6 月份项目汇总（...

lavnFan 2019-08-29 16:54 评论0 收藏0
前端每日实战 2018 年 9 月份项目汇总（共 26 个项目）

摘要：过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目，用视频记录编码过程，再配合详细的代码解读，是学习前端开发的活的参考书过往项目 2018 年 8 月份项目汇总（共 29 个项目） 2018 年 7 月份项目汇总（共 29 个项目） 2018 年 6 月份项目汇总（...

whatsns 2019-08-23 12:14 评论0 收藏0
前端每日实战：133# 视频演示如何用 CSS 和 GSAP 创作有多个关键帧的连续动画

摘要：效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。隐藏容器外的内容，并删掉辅助线最后，装饰一下页面的角落大功告成 showImg(https://segmentfault.com/img/bVbgOQt?w=400&h=302); 效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全...

forsigner 2019-08-29 16:41 评论0 收藏0

发表评论

登陆后可评论

0条评论

keke

男|高级讲师

我要关注我要私信

TA的文章

用Python爬取了几千条相亲文案，终于发现了告别单身的秘密

阅读 3310·2021-11-11 16:55
Burp+夜神模拟器app抓包(一次成功)

阅读 2712·2021-10-13 09:39
工信部召开行政指导会，要求阿里、腾讯等企业限期解除对链接的屏蔽

阅读 2521·2021-09-13 10:27
Angular2 控制视图的封装模式

阅读 2230·2019-08-30 15:55
HTML CSS + DIV实现排版布局

阅读 3178·2019-08-30 15:54
前端每日实战：121# 视频演示如何用 CSS 和 D3 创作一个小鱼游动的交互动画

阅读 3210·2019-08-29 16:34
a标签样式继承的问题

阅读 1907·2019-08-29 12:41
14天入门JavaScript-day three

阅读 1141·2019-08-29 11:33

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

前端每日实战：133# 视频演示如何用 CSS 和 GSAP 创作有多个关键帧的连续动画

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

</>复制代码

相关文章

发表评论

0条评论

男|高级讲师

TA的文章

最新活动