【动画消消乐】HTML+CSS 自定义加载动画 060
2021-07-19 15:07
1066 查看
前言
Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~ 自我介绍ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C选手|学生 简介:因C语言结识编程,随后转入计算机专业,有幸拿过国奖、省奖等,已保研。目前正在学习C/Linux(真的真的太难了~) 学习经验:扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语! 日常分享:微信公众号【海轰Pro】 记录生活、学习点滴,欢迎关注~
【动画消消乐】 平时学习生活比较枯燥,无意之间对一些网页、应用程序的过渡/加载动画产生了浓厚的兴趣,想知道具体是如何实现的? 便在空闲的时候学习下如何使用css实现一些简单的动画效果,文章仅供作为自己的学习笔记,记录学习生活,争取理解动画的原理,多多“消灭”动画!
效果展示
Demo代码
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <section><span></span></section> </body> </html>
CSS
html, body { margin: 0; height: 100%; } body { display: flex; justify-content: center; align-items: center; background: #ed556a; } section { width: 650px; height: 300px; padding: 10px; position: relative; display: flex; align-items: center; justify-content: center; border: 2px solid white; } span { width: 36px; height: 36px; display: inline-block; position: relative; background: white; animation: loading 2s linear infinite;} @keyframes loading { 0% { transform: translate(0, 0) rotateX(0) rotateY(0) } 25% { transform: translate(100%, 0) rotateX(0) rotateY(180deg)} 50% { transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg) } 75% { transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg)} 100% { transform: translate(0, 0) rotateX(0) rotateY(360deg)} }
涉及知识点(需了解)
transform属性中的
- translate:定义 2D 转换
- rotateX:沿着 X 轴的 3D 旋转
- rotateY:沿着 Y 轴的 3D 旋转
➡️ 详细解释
原理详解
步骤1
使用span标签,设置为
- 宽度、高度均为36px
- 相对定位
- 背景色:白色
span { width: 36px; height: 36px; position: relative; background: white; }
效果图如下
步骤2
为span添加动画 有5个关键帧
第一帧(初始状态)
- 二维空间:右移:0 下移:0
- 三维空间:绕x轴旋转0度 绕y轴旋转0度
transform: translate(0, 0) rotateX(0) rotateY(0)
第二帧(相对于初始状态)
- 二维空间:右移:100% 下移:0 (100%是指相对于自身的大小,若自身宽100px 那就移动100px)
- 三维空间:绕x轴旋转0度 绕y轴旋转180度
transform: translate(100%, 0) rotateX(0) rotateY(180deg)
第一帧 过渡至 第二帧 效果图如下
第三帧 (相对于初始状态)
- 二维空间:右移:100% 下移:100%
- 三维空间:绕x轴旋转-180度 绕y轴旋转180度
transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg)
第二帧 过渡至 第三帧 效果图如下
第四帧(相对于初始状态)
- 二维空间:右移:0 下移:100%
- 三维空间:绕x轴旋转-180度 绕y轴旋转360度
transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg)
第三帧 过渡至 第四帧 效果图如下
第五帧(相对于初始状态)
- 二维空间:右移:0 下移:0
- 三维空间:绕x轴旋转0度 绕y轴旋转360度
transform: translate(0, 0) rotateX(0) rotateY(360deg)
第四帧 过渡至 第五帧 效果图如下
综上 动画代码为:
animation: loading 2s linear infinite;
@keyframes loading { 0% { transform: translate(0, 0) rotateX(0) rotateY(0) } 25% { transform: translate(100%, 0) rotateX(0) rotateY(180deg)} 50% { transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg) } 75% { transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg)} 100% { transform: translate(0, 0) rotateX(0) rotateY(360deg)} }
最终效果图如下
结语
学习参考:
文章仅作为学习笔记,记录从0到1的一个过程
希望对您有所帮助,如有错误欢迎小伙伴指正~
我是海轰ଘ(੭ˊᵕˋ)੭,如果您觉得写得可以的话,请点个赞吧
谢谢支持❤️
相关文章推荐
- 「HTML+CSS」--自定义加载动画【040】
- 「HTML+CSS」--自定义加载动画【019】
- 「HTML+CSS」--自定义加载动画【020】
- 「HTML+CSS」--自定义加载动画【022】
- 「HTML+CSS」--自定义加载动画【024】
- 「HTML+CSS」--自定义加载动画【025】
- 「HTML+CSS」--自定义加载动画【008】
- 「HTML+CSS」--自定义加载动画【026】
- 「HTML+CSS」--自定义加载动画【028】
- APP在加载外部html时选择加载本地的js、css、img等资源文件(下:iOS篇)<转载>
- 纯CSS 仿某网站 loading加载动画
- html+ js+ jq+css导航条菜单的制作(水平,竖直,伸缩,带有动画效果等等。。。)
- android自定义View---6个小圆组成的加载动画
- html,css,js加载顺序
- animate() 方法执行 CSS 属性集的自定义动画。
- 自定义加载等待动画,仿金山词霸
- Android自定义加载loading view动画组件
- 改变图标!用户自定义列表样式css说明(http://www.blogcup.com/read_dicky_5345.html)
- CSS 实现加载动画之一-菊花旋转
- HTML5 Canvas绘文本动画(使用CSS自定义字体)