当前第2页 返回上一页
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
相关推荐:
图片懒加载imgLazyLoading.js详解
巧用ajax请求服务器加载数据列表时提示loading的方法
微信小程序loading组件如何载入动画方法教程
以上就是css3绘制一个圆圆的loading转圈动画实例分享的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
border-image-width属性怎么用
怎样实现meta标签中的viewport来控制设备屏幕的css属性
resize属性怎么用
css常见样式
彻底理解css中视觉格式化模型(附示例)
html5/css3专题 css3打造百度贴吧的3d翻牌效果的经典案例
css操作控件实现disable效果
qq浏览器 不支持css3怎么办
自动清理js、css文件的缓存方法
网页布局的时候先写html还是先写css
更多相关阅读请进入《loading》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css3绘制一个圆圆的loading转圈动画实例分享