css3写一个加载动画
先制作一个正方形，让圆点在正方形的最外侧
<style>
body {
margin: 0;
}
.loading {
width: 200px;
height: 200px;
background: skyblue;
margin: 100px auto 0px;
position: relative;
}
.loading .item {
width: 20px;
height: 20px;
border-radius: 50%;
background: pink;
position: absolute;
/* left：50%是指的左边的点的位置在中间 第一个圆点在最顶部 */
left: 50%;
top: 0px;
margin-left: -10px;
/* 基准点 */
transform-origin: 10px 100px;
}
//第二个圆点
.loading .item:nth-child(2) {
transform: rotate(40deg);
}
//第三个圆点
.loading .item:nth-child(3) {
transform: rotate(80deg);
}
</style>
<body>
<div class="loading">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
借助 rotate 让9个圆点在正方形的四周
<style>
body {
margin: 0;
}
.loading {
width: 200px;
height: 200px;
background: skyblue;
margin: 100px auto 0px;
position: relative;
}
.loading .item {
width: 20px;
height: 20px;
border-radius: 50%;
background: pink;
position: absolute;
/* left：50%是指的左边的点值在中间 第一个圆点在最顶部 */
left: 50%;
top: 0px;
margin-left: -10px;
/* 基准点 */
transform-origin: 10px 100px;
}
.loading .item:nth-child(2) {
transform: rotate(40deg);
}
.loading .item:nth-child(3) {
transform: rotate(80deg);
}
/* 以此类推 快速做出其他的圆点 */
.loading .item:nth-child(4) {
transform: rotate(120deg);
}
.loading .item:nth-child(5) {
transform: rotate(160deg);
}
.loading .item:nth-child(6) {
transform: rotate(200deg);
}
.loading .item:nth-child(7) {
transform: rotate(240deg);
}
.loading .item:nth-child(8) {
transform: rotate(280deg);
}
.loading .item:nth-child(9) {
transform: rotate(320deg);
}
</style>
优化代码
上面我们给每一个点都设置了旋转的角度。
这样觉得很low、都在重复。如果点很多，那不是要累死我们呀。
怎么解决这个问题了？我们可以使用css的变量来解决这个问题。
我们可以可以使用自定义属性来处理这个问题的。自定义属性是以"--"开头。
使用自定义属性"--" 来优化代码
<style>
body {
margin: 0;
}
.loading {
width: 200px;
height: 200px;
background: skyblue;
margin: 100px auto 0px;
position: relative;
}
.loading .item {
width: 20px;
height: 20px;
border-radius: 50%;
background: pink;
position: absolute;
/* left：50%是指的左边的点值在中间 第一个圆点在最顶部 */
left: 50%;
top: 0px;
margin-left: -10px;
/* 基准点 */
transform-origin: 10px 100px;
/* calc 函数可以进行运算*/
transform: rotate(calc(var(--i)*40deg));
}
</style>
<div class="loading">
<!-- 自定义属性是通过"--"来命名的 -->
<div class="item" style="--i:0"></div>
<div class="item" style="--i:1"></div>
<div class="item" style="--i:2"></div>
<div class="item" style="--i:3"></div>
<div class="item" style="--i:4"></div>
<div class="item" style="--i:5"></div>
<div class="item" style="--i:6"></div>
<div class="item" style="--i:7"></div>
<div class="item" style="--i:8"></div>
</div>
让每个一个小圆点间隔一段时间亮起来
<style>
body {
margin: 0;
}
.loading {
width: 200px;
height: 200px;
background: pink;
margin: 100px auto 0px;
position: relative;
}
.loading .item {
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(255, 255, 255, .2);
position: absolute;
/* left：50%是指的左边的点值在中间 第一个圆点在最顶部 */
left: 50%;
top: 0px;
margin-left: -10px;
/* 基准点 */
transform-origin: 10px 100px;
/* calc 函数可以进行运算*/
transform: rotate(calc(var(--i)*40deg));
/* 调用动画 */
animation: loading 2s ease infinite;
}
@keyframes loading {
0%,
50% {
background: rgba(255, 255, 255, .2);
}
50.5%,
100% {
background: #fff;
}
}
.loading .item:nth-child(1) {
animation-delay: 0s;
}
.loading .item:nth-child(2) {
animation-delay: 0.111s;
}
.loading .item:nth-child(3) {
animation-delay: 0.222s;
}
/* 以此类推 快速做出其他的圆点 */
.loading .item:nth-child(4) {
animation-delay: 0.333s;
}
.loading .item:nth-child(5) {
animation-delay: 0.444s;
}
.loading .item:nth-child(6) {
animation-delay: 0.555s;
}
.loading .item:nth-child(7) {
animation-delay: 0.666s;
}
.loading .item:nth-child(8) {
animation-delay: 0.777s;
}
.loading .item:nth-child(9) {
animation-delay: 0.888s;
}
</style>
</head>
<body>
<div class="loading">
<!-- 自定义属性是通过"--"来命名的 -->
<div class="item" style="--i:0"></div>
<div class="item" style="--i:1"></div>
<div class="item" style="--i:2"></div>
<div class="item" style="--i:3"></div>
<div class="item" style="--i:4"></div>
<div class="item" style="--i:5"></div>
<div class="item" style="--i:6"></div>
<div class="item" style="--i:7"></div>
<div class="item" style="--i:8"></div>
</div>
</body>
同样优化代码
<style>
body {
margin: 0;
}
.loading {
width: 200px;
height: 200px;
background: pink;
margin: 100px auto 0px;
position: relative;
}
.loading .item {
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(255, 255, 255, .2);
position: absolute;
/* left：50%是指的左边的点值在中间 第一个圆点在最顶部 */
left: 50%;
top: 0px;
margin-left: -10px;
/* 基准点 */
transform-origin: 10px 100px;
/* calc 函数可以进行运算*/
transform: rotate(calc(var(--i)*40deg));
/* 调用动画 */
animation: loading 2s ease infinite;
animation-delay: calc(var(--i) * 0.11s);
}
@keyframes loading {
0%,
50% {
background: rgba(255, 255, 255, .2);
}
50.5%,
100% {
background: #fff;
}
}
</style>
</head>
<body>
<div class="loading">
<!-- 自定义属性是通过"--"来命名的 -->
<div class="item" style="--i:0"></div>
<div class="item" style="--i:1"></div>
<div class="item" style="--i:2"></div>
<div class="item" style="--i:3"></div>
<div class="item" style="--i:4"></div>
<div class="item" style="--i:5"></div>
<div class="item" style="--i:6"></div>
<div class="item" style="--i:7"></div>
<div class="item" style="--i:8"></div>
</div>
</body>
css3写一个加载动画的更多相关文章
- 用css3制作旋转加载动画的几种方法
以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...
- 源码分享-纯CSS3实现齿轮加载动画
纯CSS3实现齿轮加载动画是一款可以用来做Loading动画的CSS3特效代码. 有兴趣的朋友可以下载下来试试:http://www.huiyi8.com/sc/8398.html
- [前端随笔][CSS] 制作一个加载动画 即帖即用
说在前面 描述 [加载中loading...] 的动画图片往往使用GIF来实现,但GIF消耗资源较大,所以使用CSS直接制作更优. 效果传送门1 效果传送门2 关键代码 @keyframes 规则 用 ...
- 原生JS+ CSS3创建loading加载动画；
效果图: js创建loading show = function(){ //loading dom元素 var Div = document.createElement("div" ...
- css3很酷的加载动画多款
在线实例:http://www.admin10000.com/document/3601.html 源码:https://github.com/tobiasahlin/SpinKit
- css3动画特效：纯css3制作win8加载动画特效
Windows 8 完整效果如上图:这个里面可能是css冲突,喜欢的可以自己去体征一下: css特效代码: <style type="text/css"> ...
- 我用 CSS3 实现了一个超炫的 3D 加载动画
今天给大家带来一个非常炫酷的CSS3加载Loading动画,它的特别之处在于,整个Loading动画呈现出了3D的视觉效果.这个Loading加载动画由12个3D圆柱体围成一个椭圆形,同时这12个圆柱 ...
- 几行css3代码实现超炫加载动画
之前为大家分享了css3实现的加载动画.今天为大家带来一款只需几行代码就可以实现超炫的动画加载特效.我们一起看下效果图: 在线预览 源码下载 实现代码: 极简的html代码: <div> ...
- ReactNative学习实践--动画初探之加载动画
学习和实践react已经有一段时间了,在经历了从最初的彷徨到解决痛点时的兴奋,再到不断实践后遭遇问题时的苦闷,确实被这一种新的思维方式和开发模式所折服,react不是万能的,在很多场景下滥用反而会适得 ...
- HTML加载动画实现
在页面加载完成之前或者执行某操作时,先显示要显示的加载动画. 实现原理 先定义一个加载动画元素(最好是纯CSS实现,图片的话可能慢一点),当页面未加载完成之前,先使其"可见",当页 ...
随机推荐
- 如何利用CANN DVPP进行图片的等比例缩放？
摘要:介绍如何用昇腾AI处理器上的DVPP单元进行,图像的等比例缩放,保证图像不变形. 本文分享自华为云社区<CANN DVPP进行图片的等比例缩放>,作者:马城林 . 1. 为什么需要进 ...
- SimpleDateFormat线程不安全了？这里有5种解决方案
摘要:我们知道SimpleDateFormat是线程不安全,本文会介绍多种解决方案来保证线程安全. 本文分享自华为云社区<java的SimpleDateFormat线程不安全出问题了,虚竹教你多 ...
- appuploader不是开发者账号
Appuploader是一款可以帮助开发者上传iOS应用到Apple App Store的工具.很多开发者都知道,在上传应用到App Store之前,需要创建开发者账号并获得苹果官方的认证才能进行上传 ...
- Intellij IDEA 显示 access.log 日志
先配置 SpringBoot 记录 access.log 日志,先让accesslog 显示出来
- Axure 公司年会抽奖器
步骤一:拖拉摆放好相关控件 1.摆好相关相关背景,即一个心形和一行文字"一路同行,感谢同行" 2.一个中继器,中继器里面放有一个300X60的白底黑框矩形.一个"name ...
- 2019年第十届蓝桥杯国赛C++C组
蓝桥杯历年国赛真题汇总:Here 统一声明 如果不写默认带有常用头文件 如果不表明主函数默认表示在 void solve(){} 默认使用 using namespace std; ios::sync ...
- JXUST_NC - ACM工作室20级选拔赛题解
A - RioTian学长的星际航线 并查集板子 #include <bits/stdc++.h> using namespace std; const int maxn = 1010; ...
- 负载均衡--rpc服务端
1. dubbo负载均衡的作用? 其出发点,自然也就是普通的负载均衡器的出发点了. 将负载均衡功能实现在rpc客户端侧,以便能够随时适应外部的环境变化,更好地发挥硬件作用. 而且客户端的负载均衡天然地 ...
- 【驱动】I2C驱动分析(二)-驱动框架
I2C驱动框架简介 I2C 驱动属于总线-设备-驱动模型的,与I2C总线设备驱动模型相比,大体框架是一样,系统的整体框架如下所示. 最上层是应用层,在应用层用户可以直接用open read write ...
- ASP.Net Core 5.0 MVC log4net日志的添加
1. 引入程序集 Microsoft.Extensions.Logging.Log4Net.AspNetCore 及 log4net 2. 添加配置文件log4net.Config, 并将属性改为& ...