如何用纯 CSS 创作一个同心圆弧旋转 loader 特效
效果预览
在线演示
按下右侧的“点击预览”按钮在当前页面预览,点击链接全屏预览。
https://codepen.io/zhang-ou/pen/OZmXQX
可交互视频教程
此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
请用 chrome, safari, edge 打开观看。
https://scrimba.com/c/cPdWVuD
源代码下载
本地下载
请从 github 下载。
https://github.com/comehope/front-end-daily-challenges/tree/master/010-concentric-arc-rotating-loader-animation
代码解读
定义 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
如何用纯 CSS 创作一个同心圆弧旋转 loader 特效相关推荐
- 如何用纯 CSS 创作一个金属光泽 3D 按钮特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此 ...
- 如何用纯 CSS 创作一个金属光泽 3D 按钮特效 1
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此 ...
- 如何用纯 CSS 创作一个精彩的彩虹 loading 特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vjvoow 可交互视频教 ...
- 如何用纯 CSS 创作一个小球上台阶的动画
如何用纯 CSS 创作一个小球上台阶的动画 效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/come ...
- 4. 纯 CSS 创作一个金属光泽 3D 按钮特效
4. 纯 CSS 创作一个金属光泽 3D 按钮特效 原文地址:https://segmentfault.com/a/1190000014599280 HTML代码: <div class=&qu ...
- 7.纯 CSS 创作一个 3D 文字跑马灯特效
7.纯 CSS 创作一个 3D 文字跑马灯特效 原文地址:https://segmentfault.com/a/1190000014663038 感想:简单的从右到左动画 HTML代码: <di ...
- html鼠标拖尾效果,前端每日实战:25# 视频演示如何用纯 CSS 创作一个慧星拖尾效果的 loader 动画...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, s ...
- 如何用纯 CSS 创作一个慧星拖尾效果的 loader 动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/YLRLaM 可交互视频教 ...
- 如何用纯 CSS 创作一个荧光脉冲 loader 特效
效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视 ...
最新文章
- java中服务器瘫痪怎么办,跑的好好的 Java 进程,怎么突然就瘫痪了
- PHP如何处理emoji表情存入utf8的数据库
- 服务器架设篇-----CentOS架设WWW服务器-Nginx+Mysql+PHP
- python 水仙花_python 水仙花
- mie散射理论方程_电磁散射工程应用基础
- 网站整体流程_企业建设网站流程解析-上海回声网络
- Linux下rcS文件中sleep用法,对busybox工具rcS脚本中exec执行﹑后台执行和nohup执行的理解...
- Quartus 13.0安装教程
- c语言中可以使用setw函数吗,string和stringstream+setw()用法总结
- LATEX如何设置英文字体,中英文标题
- Excel中Sheet(s)和Worksheet(s)的区别
- 如何在 HTML中使用图标字体
- Android WebView播放视频并支持全屏
- 深度学习模型轻量化(上)
- 蒙特卡罗树搜索法c语言,蒙特卡罗方法的计算方法
- 计算机基础知识中真值是什么,计算机基础知识(一)
- 【C++】打开C++的大门
- 【Python】 Python编程基础练习100题学习记录第七期(61~70)
- 程序员初入职场月薪三千,网友:3000元?你是在丢码农的脸吗
- FreeModbus
热门文章
- 在windows程序中嵌入Lua脚本引擎--编写自己的Lua库
- Python3中PyMongo使用举例
- OpenCV 图像采样 插值 几何变换
- 【GStreamer】使用capsfilter设置x264enc中的profile级别
- accp8.0html作业,Accp8.0HTML标签
- python2.7 mysql mock_Python中Mock的示例
- php发布商品信息逻辑,php – 逻辑思考一个数据库结构:为用户发布的东西添加“标签” – 一个单独的表或……?...
- python单词词频字典_python利用多种方式来统计词频(单词个数)
- python打印列表元素_python打印列表中指定元素的所有下标
- 设备漏电对计算机影响,电脑机箱漏电对电脑有影响吗