html如何画出四个圆圈,css3如何绘制一个圆圆的loading转圈动画
如何绘制一个圆圆的loading圈
小程序里需要一个像下面的loading,原生的没有,引入别的组件库又太大,所有决定自己写个。
1.基本原理
动态的实现原理是给8个小圆圈设置透明度由大变小的动画,每个圆圈设置不同的动画启动时间。布局的实现原理是父元素设置为position: relative, 每个圆圈设置样式为position: absolute; left: xx; top: xx; right: xx; bottom: xx。 通过给left/right/top/bottom设置不同的值将其均匀的分布在一个圆圈上。html代码如下:
说起来简单,但是给它们赋值的时候没有经验,第一次用理科生的思维简单将圆三等分计算坐标,往往8个圆圈就围成了一个菱形/正方形。。。就像下面这样
2. 位置设置技巧
后来看到 同学po的文章css3实现10中loading效果, 按照JRd3的代码确实可以实现很好看的效果,但是当我想换一换loading圆圈大小的时候,样式就崩了,经过分析,他们的坐标是存在某种数学关系的,如下图所示,在竖直或横线上的坐标可通过50%定位,斜线上的坐标如图中所示,其中w是矩形的宽高或者说是8个小圆圈所围成的大园的半径。
公式推导如下:
具体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定义了大圆和小圆圈的半径,不管改成多大只需要更改变量,下面样式无需改变。
通过这个公式计算的看起来就很像圆形了
3.动画时间设置
假设动画持续时间为 t, 圆圈个数为 c, 某个小圆圈的位置为 i (比如上面 i 取 1~8),那么小圈相继启动的时间为 i * t/c
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html如何画出四个圆圈,css3如何绘制一个圆圆的loading转圈动画相关推荐
- html如何画出四个圆圈,HTML5 Canvas中绘制椭圆的4种方法
概述 HTML5中的Canvas并没有直接提供绘制椭圆的方法,下面是对几种绘制方法的总结.各种方法各有优缺,视情况选用.各方法的参数相同: 1.context为Canvas的2D绘图环境对象, 2.x ...
- 用matlab画水晶球,Flash CS4的Deco工具绘制一个有图案的水晶球
本例主要使用Flash CS4的Deco工具绘制一个有图案的水晶球,通过本例的制作学习Deco工具创作的思路和方法.教程很不错,推荐过来,大家一起来学习吧! 我们先来看看最终的效果图: 本例思路: & ...
- CSS3来绘制一个3维立体游泳圈_立体墙绘画绘制技巧来了,襄阳墙体彩绘公司介绍...
立体墙绘给人的感觉是想一个生活中真实的物体,和平面画相比,立体画是较为吸引他人.因为平面化没有让人觉得是一个动态的感觉.立体画大家也知道是不好进行绘制,所以下面由襄阳艺术彩绘公司为大家介绍立体画的绘制 ...
- 使用css3属性做一个循环旋转的动画
做这个动画是使用css3中的animation 和 @-webkit-keyframes 组合使用来完成 //这是html部分代码 <div class="home"> ...
- 用python画出四个不同颜色的同心圆
from turtle import * pensize(5) color("red") circle(50) penup() goto(0,-20) pendown() colo ...
- matlab画出玫瑰线,数学实验 玫瑰线的绘制
实验一 玫瑰线的绘制 一. 实验背景 数学方程的图形千变万化,形状各异.极坐标方程为θρ n a cos =或θρn a sin =的图像以形似玫瑰而被称为玫瑰线,他们是由以原点为公共点的玫瑰花瓣组成 ...
- python画出心形图-python如何绘制心形
python绘制心形的方法:利用matplotlib和numpy画心形,代码为[init = np.arange(-np.pi, np.pi, 0.001);plt.fill_between(x, y ...
- python画出的雷达图效果-PYTHON绘制雷达图代码实例
这篇文章主要介绍了PYTHON绘制雷达图代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.雷达图 import matplotlib.py ...
- python画太极八卦图_用布尔运算绘制一个太极八卦图
布尔运算是UI设计中一个关键的知识点,今天,我们继续给不熟悉的朋友补补课. 教程来自P大点S的PJ胸,Pro_java,在这里,我们会用一个八卦图,再次带大家熟悉布尔运算,特别适合新手练习! 新建一个 ...
最新文章
- [MySQL FAQ]系列 -- mysql是否支持跨库事务
- Web前端岗位面试题汇总(含答案)
- matlab中数值的取整、四舍五入、文本输出
- MySQL 纯insert_MySQL使用INSERT插入多条记录
- 144显示器只有60_你知道显示器60Hz和144Hz的刷新率差别有多大吗?你没有用过吗?...
- 一 python编程基础
- 实现横向排列的几种方案
- javaweb项目静态资源被拦截的解决方法
- windows环境下安装TensorFlow(亲测)
- 网页长截图工具_Mac系统如何轻松实现网页长截图功能
- 用户交互系统BBS功能展示(手机端)
- 数据库基础:select基本查询语句
- 操作系统的基本类型、工作流程及其优缺点
- element实现table表格序号递增的效果
- 【Hash篇】什么是哈希值?
- 前后端交互,密码加密,RSA 实现前端 js 加密,后端 go 解密
- File和MultipartFile互转
- 品优购项目案例(练习)
- Android 学习论坛博客及网站推荐 1
- 如何构建更好的内容分发网络?
热门文章
- Unity中,区别LookAt与LookRotation
- 【上班那点事】TO, CC, BCC-办公室邮件门道知多少
- 【ArcGIS】利用字段计算器按 OSM 道路等级生成道路速度
- 六度分离(floyd算法,SPFA算法,最短路—Dijkstra算法)
- mac系统升级导致VirtualBox报Kernel driver not installed (rc=-1908)
- Mac系统 - 升级node版本
- macd 公式 java_EMA指标和MACD指标的JAVA语言实现
- Python --- 输入、输出、运算符
- 10.sprd背光流程
- jQuery Color Animate (jQuery 颜色变换动画) 插件