前端每日实战:10# 视频演示如何用纯 CSS 创作一个同心圆弧旋转 loader 特效
效果预览
按下右侧的“点击预览”按钮在当前页面预览,点击链接全屏预览。
https://codepen.io/zhang-ou/pen/OZmXQX
可交互视频教程
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
源代码下载
请从 github 下载。
代码解读
定义 dom,只包含一个元素:
<div class="circle"></div>
居中显示:
html,
body,
.circle {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
}
一共画三层圆弧,先画最外一层的样式:
.circle {
width: 10em;
height: 10em;
border-width: 0.4em;
border-style: solid;
border-radius: 50%;
border-left-color: transparent;
border-right-color: transparent;
border-top-color: red;
border-bottom-color: blue;
}
再用伪元素画中间一层的样式:
.circle {
position: relative;
}
.circle::before {
content: '';
position: absolute;
width: 75%;
height: 75%;
border-width: 0.4em;
border-style: solid;
border-radius: 50%;
border-left-color: transparent;
border-right-color: transparent;
border-top-color: orange;
border-bottom-color: cyan;
}
再用伪元素画最内一层的样式:
.circle::before {
content: '';
position: absolute;
width: 75%;
height: 75%;
border-width: 0.4em;
border-style: solid;
border-radius: 50%;
border-left-color: transparent;
border-right-color: transparent;
border-top-color: yellow;
border-bottom-color: limegreen;
}
定义动画效果:
@keyframes animate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(1440deg);
}
}
最后,应用动画效果到每层:
.circle {
animation: animate 4s ease-in-out infinite alternate;
}
.circle::before {
animation: animate 8s ease-in-out infinite alternate;
}
.circle::after {
animation: animate 16s ease-in-out infinite alternate;
}
大功告成!
知识点
- border-left-color https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color
- border-right-color https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color
- border-top-color https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color
- border-bottom-color https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color
- animation-duration https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration
前端每日实战:10# 视频演示如何用纯 CSS 创作一个同心圆弧旋转 loader 特效的更多相关文章
- 如何用纯 CSS 创作一个同心圆弧旋转 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程 此视 ...
- 10.纯 CSS 创作一个同心圆弧旋转 loader 特效
原文地址:https://segmentfault.com/a/1190000014682999 想到了扇形:正方形 ->border-radius: 50%; ->取四份中的任意一份. ...
- 前端每日实战:99# 视频演示如何用纯 CSS 创作一个过山车 loader
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/KBxYZg/ 可交互视频 此视频是 ...
- 前端每日实战:23# 视频演示如何用纯 CSS 创作一个菜单反色填充特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/qYMoPo 可交互视频教程 此视频是 ...
- 前端每日实战:27# 视频演示如何用纯 CSS 创作一个精彩的彩虹 loading 特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vjvoow 可交互视频教程 此视频 ...
- 前端每日实战:4# 视频演示如何用纯 CSS 创作一个金属光泽 3D 按钮特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此视频是可以 ...
- 前端每日实战:7# 视频演示如何用纯 CSS 创作一个 3D 文字跑马灯特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/GdrrZq 可交互视频教程 此视频是可以交 ...
- 前端每日实战:25# 视频演示如何用纯 CSS 创作一个慧星拖尾效果的 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YLRLaM 可交互视频教程 此视频 ...
- 前端每日实战:157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画(实际上每一行都是平行的)
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VEyoGj 可交互视频 此视频是可 ...
随机推荐
- hdu 6035 Colorful Tree(虚树)
考虑到树上操作:首先题目要我们求每条路径上出现不同颜色的数量,并把所有加起来得到答案:我们知道俩俩点之间会形成一条路径,所以我们可以知道每个样例的总的路径的数目为:n*(n-1)/2: 这样单单的求, ...
- linear correlation coefficient|Correlation and Causation|lurking variables
4.4 Linear Correlation 若由SxxSyySxy定义则为: 所以为了计算方便: 所以,可以明白的是,Sxx和Sx是不一样的! 所以,t r is independent of th ...
- freeswitch的internal的profile无法启动
服务器断电重启后,导致freeswitch的internal的profile无法启动 在fs_cli执行 sofia profile internal restart 打印如下信息: [ERR] sw ...
- VisionPro和Halcon的详细对比
一.概括的对比 1.1 Halcon的优势 Halcon有着更加低廉的Lisence 1.并且提供更好.更强大的2D和3D的视觉软件库 2.Halcon支持的视觉图像采集设备数量是Visionpro ...
- django框架基础-框架介绍-长期维护
############### MVC架构介绍 ################ # MVC架构 # 一个软件框架有很多的模块,每一个模块有不同的功能 # 模块与模块之间相互配合来完成软件 ...
- Pivotal tc Server Integration for Eclipse
Pivotal tc Server Integration for Eclipse
- RxSwift学习笔记之Subject
本文为原创文章,转载请标明出处 AsyncSubject 一个AsyncSubject只在原始Observable完成后,发射来自原始Observable的最后一个值.它会把这最后一个值发射给任何后续 ...
- 吴裕雄--天生自然python学习笔记:Python3 多线程
多线程类似于同时执行多个不同程序,多线程运行有如下优点: 使用线程可以把占据长时间的程序中的任务放到后台去处理. 用户界面可以更加吸引人,比如用户点击了一个按钮去触发某些事件的处理,可以弹出一个进度条 ...
- 吴裕雄--天生自然python学习笔记:Python MySQL - mysql-connector 驱动
本章节我们为大家介绍使用 mysql-connector 来连接使用 MySQL, mysql-connector 是 MySQL 官方提供的驱动器. 我们可以使用 pip 命令来安装 mysql-c ...
- 吴裕雄--天生自然python编程:实例(2)
list1 = [10, 20, 4, 45, 99] list1.sort() print("最小元素为:", *list1[:1]) list1 = [10, 20, 1, 4 ...