小编给大家分享一下如何使用纯CSS实现简单加载动画效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!效果图思路CSS 用于修饰 html,所以即便是再简单的效果,
小编给大家分享一下如何使用纯CSS实现简单加载动画效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
效果图
思路
CSS 用于修饰 html,所以即便是再简单的效果,都是要依赖于 HTML 的,而本例效果的实现 HTML 布局更是重中之重。
先来分析动画效果组成:
线条
加载静止的话,就是几个线条组成了一个圈
这些线条长度一致,只是方向有所差别
每个线条不是贯穿整个直径,而是以半径为单位
圆
整体效果是一个圆环,内圆的背景色和整个背景一致
动画
从某一个线条开始,每个半径线条颜色(透明度)逐个发生变化
综上,我们用以下步骤一步步解开加载效果的神秘面纱:
(1)用 HTML 实现沿某个点分布的相同线条,由它们组成一个圆形
(2)画一个小圆,添加背景色,并覆盖至线条圆心处
(3)添加渐变动画,使线条透明度发生变化
(4)通过给不同线条设置不同动画延迟,让线条动起来
HTML
<div id="container"><div class="load-line rotate-0"><span class="left"></span><span class="right"></span></div><div class="load-line rotate-30"><span class="left"></span><span class="right"></span></div><div class="load-line rotate-60"><span class="left"></span><span class="right"></span></div><div class="load-line rotate-90"><span class="left"></span><span class="right"></span></div><div class="load-line rotate-120"><span class="left"></span><span class="right"></span></div><div class="load-line rotate-150"><span class="left"></span><span class="right"></span></div><div id="circle-center"></div></div>
解析:
load-line 表示在同一直径的半径线条,由于旋转方向一致,将其放在同一 p 中
由于每个半径线条的动画延迟不一样,添加 left 和 right 两种线条
circle-center 表示内圆
CSS
#container, #circle-center {background: grey;}#container {position: relative;width: 600px;height: 300px;}#circle-center {position: absolute;top: 100px;left: 250px;width: 100px;height: 100px;border-radius: 100px;}.load-line {position: absolute;top: 150px;left: 200px;width: 200px;height: 13px;}.load-line > span {display: inline-block;width: 50%;height: 100%;border-radius: 20px;background: white;}.left {float: left;}.right {float: right;}.rotate-0 {transfORM: rotate(0);}.rotate-0 > .left {animation: load-effect 1.2s linear 0s infinite;}.rotate-0 > .right {animation: load-effect 1.2s linear 0.6s infinite;}.rotate-30 {transform: rotate(30deg);}.rotate-30 > .left {animation: load-effect 1.2s linear 0.1s infinite;}.rotate-30 > .right {animation: load-effect 1.2s linear 0.7s infinite;}.rotate-60 {transform: rotate(60deg);}.rotate-60 > .left {animation: load-effect 1.2s linear 0.2s infinite;}.rotate-60 > .right {animation: load-effect 1.2s linear 0.8s infinite;}.rotate-90 {transform: rotate(90deg);}.rotate-90 > .left {animation: load-effect 1.2s linear 0.3s infinite;}.rotate-90 > .right {animation: load-effect 1.2s linear 0.9s infinite;}.rotate-120 {transform: rotate(120deg);}.rotate-120 > .left {animation: load-effect 1.2s linear 0.4s infinite;}.rotate-120 > .right {animation: load-effect 1.2s linear 1.0s infinite;}.rotate-150 {transform: rotate(150deg);}.rotate-150 > .left {animation: load-effect 1.2s linear 0.5s infinite;}.rotate-150 > .right {animation: load-effect 1.2s linear 1.1s infinite;}@keyframes load-effect {0% {opacity: 0;}100% {opacity: 1;}}
解析:
整个效果的父容器需要设置非 static 的定位,方便子元素布局。本例为 relative
所有线条大小一致,并且有圆角
沿同一直径方向的线条旋转角度一致
所有线条动画效果一致(透明度在变化),动画时长一致,动画延迟从某一个线条开始,逐个递加
以上是“如何使用纯css实现简单加载动画效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网精选频道!
--结束END--
本文标题: 如何使用纯css实现简单加载动画效果
本文链接: https://www.lsjlt.com/news/268812.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-01
2024-05-01
2024-05-01
2024-05-01
2024-05-01
2024-05-01
2024-05-01
2024-05-01
2024-05-01
2024-05-01
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0