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 相关文章推荐
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
Feb 10 HTML / CSS
css3实现input输入框颜色渐变发光效果代码
Apr 02 HTML / CSS
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
Apr 03 HTML / CSS
利用CSS3的transition属性实现滑动效果
Aug 05 HTML / CSS
纯CSS3绘制打火机动画火焰效果
Jul 18 HTML / CSS
传统HTML页面实现模块化加载的方法
Oct 15 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
Jul 25 HTML / CSS
HTML5 Web Database 数据库的SQL语句的使用方法
Dec 09 HTML / CSS
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
Dec 13 HTML / CSS
html5将图片转换成base64的实例代码
Sep 21 HTML / CSS
html5中canvas图表实现柱状图的示例
Nov 13 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
Mar 21 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 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
ThinkPHP实现简单登陆功能
2017/04/28 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
JavaScript延迟加载
2021/03/09 Javascript
让JavaScript 轻松支持函数重载 (Part 1 - 设计)
2009/08/04 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
2012/05/11 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
Sortable.js拖拽排序使用方法解析
2016/11/04 Javascript
Angular的$http与$location
2016/12/26 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
IE8中jQuery.load()加载页面不显示的原因
2018/11/15 jQuery
Angular刷新当前页面的实现方法
2018/11/21 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
2019/07/10 Javascript
react项目从新建到部署的实现示例
2021/02/19 Javascript
Python实现批量读取word中表格信息的方法
2015/07/30 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
python入门教程 python入门神图一张
2018/03/05 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
python导入坐标点的具体操作
2019/05/10 Python
Django框架搭建的简易图书信息网站案例
2019/05/25 Python
Python列表对象实现原理详解
2019/07/01 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
美国著名童装品牌:OshKosh B’gosh
2016/08/05 全球购物
学习新党章思想汇报
2014/01/09 职场文书
电子商务应届生自我鉴定
2014/01/13 职场文书
2014年团支书工作总结
2014/11/14 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
2015年中学团委工作总结
2015/07/22 职场文书