如何用纯 CSS 创作一个同心圆弧旋转 loader 特效
2024-09-04 19:19:39
效果预览
按下右侧的“点击预览”按钮在当前页面预览,点击链接全屏预览。
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
原文地址:https://segmentfault.com/a/1190000014682999
最新文章
- kubernetes部署Fluentd+Elasticsearch+kibana 日志收集系统
- ffmpeg 音频转换(amr2mp3)
- 优化后的 google提供的汉字转拼音类(针对某些htc等手机的不兼容情况)
- Android Studio快捷键每日一练(3)
- 决绝Capturing &#39;demo&#39; strongly in this block is likely to lead to a retain cycle
- B:冷血格斗场
- Linux Apache 怎么修改工作模式
- Swift语法总结补充(一)
- VS2013中Django流水账笔记--配置环境
- Android 颜色大全 (colors.xml )
- class 类(1)
- 精读《javascript高级程序设计》笔记三——面向对象的程序设计
- nginx 安装和配置
- Linux主机SSH免密设置解析
- js数组排序,支持正反排序以及多维度排序
- linux C 刚初始化后的一个变量在调用一个静态库中函数后被异常修改为乱码
- 使用Libgdx开发的FlappyBird(像素鸟、疯狂的小鸟)游戏源码
- C#-hello world(二)
- SQL Server进阶 SQL优化
- SVN 钩子 同步测试服务器
热门文章
- bzoj 4197: [Noi2015]寿司晚宴【状压dp】
- 【EXCEL终极总结分享】基于NPOI扩展封装的简易操作工具类库(简单灵活易用,支持导出、导入、上传等常见操作)
- RobotFrameWork自动化系列:安装配置
- 拓扑排序复习——Chemist
- 「软件」仿站小工具v9.0
- spring boot :error querying database. Cause: java.lang.IllegalArgumentException: dataSource or dataSourceClassName or jdbcUrl is required
- python之类的相关名词解释
- pwa-serviceWorker与页面通信postMessage
- mysql查询所有表名
- 516 Longest Palindromic Subsequence 最长回文子序列