效果预览

在线演示

按下右侧的“点击预览”按钮在当前页面预览,点击链接全屏预览。

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;
}

大功告成!

知识点

原文地址:https://segmentfault.com/a/1190000014682999

如何用纯 CSS 创作一个同心圆弧旋转 loader 特效的更多相关文章

  1. 前端每日实战:10# 视频演示如何用纯 CSS 创作一个同心圆弧旋转 loader 特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/OZmXQX 可交互视频教程 此视频是可以交 ...

  2. 10.纯 CSS 创作一个同心圆弧旋转 loader 特效

    原文地址:https://segmentfault.com/a/1190000014682999 想到了扇形:正方形 ->border-radius: 50%; ->取四份中的任意一份. ...

  3. 如何用纯 CSS 创作一个金属光泽 3D 按钮特效

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此 ...

  4. 如何用纯 CSS 创作一个容器厚条纹边框特效

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/YLqbXy 可交互视频教程 此视 ...

  5. 如何用纯 CSS 创作一个菜单反色填充特效

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/qYMoPo 可交互视频教程 ...

  6. 前端每日实战:23# 视频演示如何用纯 CSS 创作一个菜单反色填充特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/qYMoPo 可交互视频教程 此视频是 ...

  7. 前端每日实战:4# 视频演示如何用纯 CSS 创作一个金属光泽 3D 按钮特效

    效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此视频是可以 ...

  8. 如何用纯 CSS 创作一个过山车 loader

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/KBxYZg/ 可交互视频 此视频是 ...

  9. 如何用纯 CSS 创作一个 3D 文字跑马灯特效

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/GdrrZq 可交互视频教程 此视 ...

随机推荐

  1. 7天学完Java基础之6/7

    final关键字的概念与四种用法 final关键字代表最终,不可改变的 常见四种用法: 可以用来修饰一个类 当前这个类不能有任何子类 可以用来修饰一个方法 当final关键字用来修饰一个方法的时候,这 ...

  2. threading多线程模块

    1 基本实现 Thread(target=函数名,args=(以元组形式传递的实参,要加",")) th = threading.Thread(target=run,args=(i ...

  3. WOJ1019 所有的M数

    题目链接: WOJ1019 题目分析: 单调栈维护,读一个进来,如果前面的比它大就弹出来,然后压栈里(反正它在最右边) 压进栈里输出它前面那个数就好了 O(n)扫一遍就能过 真的水得不能再水的题了-- ...

  4. BFS 2015百度之星初赛2 HDOJ 5254 棋盘占领

    题目传送门 /* BFS:先把1的入队,每个1和它相邻的组合后看看能不能使0变1,若有则添加入队,change函数返回改变了多少个0 注意:结果还要加上原来占领的 */ #include <cs ...

  5. git简单使用方法

    跟远程库关联起来: http://www.cnblogs.com/Gabriel-Wei/p/6564102.html http://www.liaoxuefeng.com/wiki/00137395 ...

  6. qconbeijing2015

    http://2015.qconbeijing.com/schedule 大会日程 2015年4月23日,星期四 地点 2号厅 203AB 201AB 9:15 开场致辞 专题 主题演讲 互联网金融背 ...

  7. 在线编译器Coding Ground

    http://www.tutorialspoint.com/codingground.htm Free Online IDE and Terminal - Edit, Compile, Execute ...

  8. 【转】java节省内存的几条建议

    下面是参考网络资源总结的一些在Java编程中尽可能要做到的一些地方. 1. 尽量在合适的场合使用单例   使用单例可以减轻加载的负担,缩短加载的时间,提高加载的效率,但并不是所有地方都适用于单例,简单 ...

  9. jQuery选择器之基本筛选选择器

    <h2>基本筛选器</h2> <h3>:first/:last/:even/:odd</h3> <div class="left&quo ...

  10. Python学习日记之Python函数及方法使用总结

    1.  DocStrings 文档字符串     可以直接输出位于函数内定义的说明 # -*- coding:utf-8 -*- def printMax(x, y): '''示例: 说明文档''' ...