css3如何绘制一个圆圆的loading转圈动画


Posted in HTML / CSS onJanuary 09, 2018

如何绘制一个圆圆的loading圈

小程序里需要一个像下面的loading,原生的没有,引入别的组件库又太大,所有决定自己写个。

1.基本原理

动态的实现原理是给8个小圆圈设置透明度由大变小的动画,每个圆圈设置不同的动画启动时间。布局的实现原理是父元素设置为position: relative, 每个圆圈设置样式为position: absolute; left: xx; top: xx; right: xx; bottom: xx。 通过给left/right/top/bottom设置不同的值将其均匀的分布在一个圆圈上。html代码如下:

<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个圆圈就围成了一个菱形/正方形。。。就像下面这样

css3如何绘制一个圆圆的loading转圈动画

2. 位置设置技巧

后来看到 同学po的文章css3实现10中loading效果, 按照JRd3的代码确实可以实现很好看的效果,但是当我想换一换loading圆圈大小的时候,样式就崩了,经过分析,他们的坐标是存在某种数学关系的,如下图所示,在竖直或横线上的坐标可通过50%定位,斜线上的坐标如图中所示,其中w是矩形的宽高或者说是8个小圆圈所围成的大园的半径。

公式推导如下:

css3如何绘制一个圆圆的loading转圈动画

具体css代码如下:

$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.04s ease infinite;
    }
    .dot1 {
        left: 0;
        top: 50%;
        margin-top: -$radius;
        animation-delay: 0.13s;
    }
    .dot2 {
        left: $offset;
        top: $offset;
        animation-delay: 0.26s;
    }
    .dot3 {
        left: 50%;
        top: 0;
        margin-left: -$radius;
        animation-delay: 0.39s;
    }
    .dot4 {
        top: $offset;
        right: $offset;
        animation-delay: 0.52s;
    }
    .dot5 {
        right: 0;
        top: 50%;
        margin-top: -$radius;
        animation-delay: 0.65s;
    }
    .dot6 {
        right: $offset;
        bottom: $offset;
        animation-delay: 0.78s;
    }
    .dot7 {
        bottom: 0;
        left: 50%;
        margin-left: -$radius;
        animation-delay: 0.91s;
    }
    .dot8 {
        bottom: $offset;
        left: $offset;
        animation-delay: 1.04s;
    }
}

代码使用scss定义了大圆和小圆圈的半径,不管改成多大只需要更改变量,下面样式无需改变。

通过这个公式计算的看起来就很像圆形了

css3如何绘制一个圆圆的loading转圈动画

3.动画时间设置

假设动画持续时间为 t, 圆圈个数为 c, 某个小圆圈的位置为 i (比如上面 i 取 1~8),那么小圈相继启动的时间为 i * t/c

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
分享8款纯CSS3实现的搜索框功能
Sep 14 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
css3动画 小球滚动 js控制动画暂停
Nov 29 HTML / CSS
鲜为人知的HTML5语音合成功能
May 17 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
Aug 22 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
Sep 15 HTML / CSS
详解HTML5中ol标签的用法
Sep 08 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
Dec 26 HTML / CSS
HTML5+css3:3D旋转木马效果相册
Jan 03 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
Jun 03 HTML / CSS
如何用H5实现好玩的2048小游戏
Jul 23 HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 #HTML / CSS
css3的动画特效之动画序列(animation)
Dec 22 #HTML / CSS
css3实现多个元素依次显示效果
Dec 12 #HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 #HTML / CSS
浅谈css3新单位vw、vh、vmin、vmax的使用详解
Dec 01 #HTML / CSS
浅谈css3中的渐进增强和优雅降级
Dec 01 #HTML / CSS
CSS3 linear-gradient线性渐变生成加号和减号的方法
Nov 21 #HTML / CSS
You might like
PHP类的使用 实例代码讲解
2009/12/28 PHP
PHP--用万网的接口实现域名查询功能
2012/12/13 PHP
如何用PHP实现插入排序?
2013/04/10 PHP
PHP间隔一段时间执行代码的方法
2014/12/02 PHP
Yii使用技巧大汇总
2015/12/29 PHP
PHP中Cookie的使用详解(简单易懂)
2017/04/28 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
jQuery实现日期联动效果实例
2016/07/26 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
javascript 通过键名获取键盘的keyCode方法
2017/12/31 Javascript
三步实现ionic3点击退出app程序
2019/09/17 Javascript
javascript将16进制的字符串转换为10进制整数hex
2020/03/05 Javascript
vue页面跳转实现页面缓存操作
2020/07/22 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
2020/08/31 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
2020/11/12 Javascript
Python中int()函数的用法浅析
2017/10/17 Python
python机器学习之随机森林(七)
2018/03/26 Python
python自动发送邮件脚本
2018/06/20 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
优秀交警事迹材料
2014/01/26 职场文书
企业军训感想
2014/02/07 职场文书
道德模范先进事迹
2014/02/14 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
无保留意见审计报告
2015/06/05 职场文书
工作年限证明模板
2015/06/15 职场文书
小学生暑假安全公约
2015/07/14 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书