css3如何绘制一个圆圆的loading转圈动画
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
如何绘制一个圆圆的loading圈
小程序里需要一个像下面的loading,原生的没有,引入别的组件库又太大,所有决定自己写个。
1.基本原理
动态的实现原理是给8个小圆圈设置透明度由大变小的动画,每个圆圈设置不同的动画启动时间。布局的实现原理是父元素设置为position: relative, 每个圆圈设置样式为position: absolute; left: xx; top: xx; right: xx; bottom: xx。 通过给left/right/top/bottom设置不同的值将其均匀的分布在一个圆圈上。html代码如下:
1 2 3 4 5 6 7 8 9 10 | < view class = "q-loading-dot-warp" > < view class = "dot dot1" ></ view > < view class = "dot dot2" ></ view > < view class = "dot dot3" ></ view > < view class = "dot dot4" ></ view > < view class = "dot dot5" ></ view > < view class = "dot dot6" ></ view > < view class = "dot dot7" ></ view > < view class = "dot dot8" ></ view > </ view > |
说起来简单,但是给它们赋值的时候没有经验,第一次用理科生的思维简单将圆三等分计算坐标,往往8个圆圈就围成了一个菱形/正方形。。。就像下面这样
2. 位置设置技巧
后来看到 同学po的文章css3实现10中loading效果, 按照JRd3的代码确实可以实现很好看的效果,但是当我想换一换loading圆圈大小的时候,样式就崩了,经过分析,他们的坐标是存在某种数学关系的,如下图所示,在竖直或横线上的坐标可通过50%定位,斜线上的坐标如图中所示,其中w是矩形的宽高或者说是8个小圆圈所围成的大园的半径。
公式推导如下:
具体css代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | $ width : 64px ; $ height : 64px ; $dotWidth: 10px ; $dotHeight: 10px ; $radius: 5px ; $offset: 9.37px ; @function getLeft( $x ) { @return ($width/ 4 )*$x; } @function getTop( $y ) { @return ($height/ 4 )*$y; } @keyframes changeOpacity { from { opacity: 1 ; } to { opacity: . 2 ; } } .q-loading { position : fixed ; top : 0 ; left : 0 ; right : 0 ; bottom : 0 ; .q-loading-overlay { position : fixed ; top : 0 ; left : 0 ; right : 0 ; bottom : 0 ; background-color : rgba( 255 , 255 , 255 , . 5 ); } .q-loading-content { position : absolute ; left : 50% ; top : 50% ; transform: translate( -50% , -50% ); width : $width; height : $height; z-index : 2 ; } .dot { width : 10px ; height : 10px ; position : absolute ; background-color : #0033cc ; border-radius: 50% 50% ; opacity: 1 ; animation: changeOpacity 1.04 s ease infinite; } .dot 1 { left : 0 ; top : 50% ; margin-top : -$radius; animation-delay: 0.13 s; } .dot 2 { left : $offset; top : $offset; animation-delay: 0.26 s; } .dot 3 { left : 50% ; top : 0 ; margin-left : -$radius; animation-delay: 0.39 s; } .dot 4 { top : $offset; right : $offset; animation-delay: 0.52 s; } .dot 5 { right : 0 ; top : 50% ; margin-top : -$radius; animation-delay: 0.65 s; } .dot 6 { right : $offset; bottom : $offset; animation-delay: 0.78 s; } .dot 7 { bottom : 0 ; left : 50% ; margin-left : -$radius; animation-delay: 0.91 s; } .dot 8 { bottom : $offset; left : $offset; animation-delay: 1.04 s; } } |
代码使用scss定义了大圆和小圆圈的半径,不管改成多大只需要更改变量,下面样式无需改变。
通过这个公式计算的看起来就很像圆形了
3.动画时间设置
假设动画持续时间为 t, 圆圈个数为 c, 某个小圆圈的位置为 i (比如上面 i 取 1~8),那么小圈相继启动的时间为 i * t/c
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 是一款实现了多圆环同时旋转的多层圆环loading加载动画特效,非常有意思,大家可以自行替换颜色,适应于绝大多数的网站使用,欢迎有兴趣的朋友们前来下载使用2018-01-19
css3 animation制作loading白色圆点滑过加载动画特效源码
这是一款基于css3 animation制作白色圆点滑过加载动画特效源码,一组白色圆点从左向右依次滑过,圆点由小渐大模糊呈现。本段代码可以在各个网页使用,有需要的朋友可以直接2017-12-21- 这是一款基于纯CSS3实现的红酒碰杯loading动画效果源码。画面上重复出现盛着红酒的酒杯碰杯的loading动画效果。2017-11-01
css3 svg实现的三角形图标变换loading加载动画特效源码
这是一款基于css3 svg实现的三角形图标变换loading加载动画特效源码。画面中央呈现出彩色三角形层叠放大效果,图形外边缘三角形放大后逐渐消失,同时图形中心不断出现新的2017-08-3115种HTML5和CSS3炫酷彩色loading加载动画特效
这是一套HTML5和CSS3炫酷彩色loading加载动画特效,共15种特效,通过div盒子或svg元素,配合CSS3来制作,简单炫酷2017-07-28- 本篇文章主要介绍了详解纯CSS3制作的20种loading动效,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-07-05
- 这是一组使用CSS3制作的波形loading动画特效,共有11种波形动画,简单炫酷,需要的朋友可下载试试2017-06-22
- 这篇文章主要介绍了CSS3实现的几个小loading效果 ,需要的朋友可以参考下2018-09-27
最新评论