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轻松实现清新 Loading 效果的简单实例
Jun 06 HTML / CSS
CSS3属性box-shadow使用详细教程
Jan 21 HTML / CSS
CSS3弹性盒模型flex box快速入门心得(必看篇)
May 24 HTML / CSS
css3的focus-within选择器的使用
May 11 HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
Jun 06 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
Nov 07 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
Jun 27 HTML / CSS
HTML5 Web缓存和运用程序缓存(cookie,session)
Jan 11 HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 16 HTML / CSS
CSS3实现的水平标题菜单
Apr 14 HTML / CSS
css3中transform属性实现的4种功能
Aug 07 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新手上路(九)
2006/10/09 PHP
由php的call_user_func传reference引发的思考
2010/07/23 PHP
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
jquery select操作的日期联动实现代码
2009/12/06 Javascript
为Extjs加加速(javascript加速)
2010/08/19 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
2014/01/31 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
JS实现双击编辑可修改状态的方法
2015/08/14 Javascript
javascript日期操作详解(脚本之家整理)
2015/09/05 Javascript
深入剖析JavaScript:Object类型
2016/05/10 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
python中wx将图标显示在右下角的脚本代码
2013/03/08 Python
详解Python如何生成词云的方法
2018/06/01 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
酒店应聘自荐信
2013/11/09 职场文书
酒店副总经理岗位职责范本
2014/02/04 职场文书
大学生个人实习的自我评价
2014/02/15 职场文书
财务部总监岗位职责
2014/03/12 职场文书
加入学生会演讲稿
2014/04/24 职场文书
大专生自荐书范文
2014/06/22 职场文书
公司离职证明标准样本
2014/10/05 职场文书
借条格式范本
2015/05/25 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS