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

感想:重点在小球绕环转动。

HTML code:

<div class="container">
<div class="ring"></div>
<div class="spheres">
<span class="sphere"></span>
<span class="sphere"></span>
<span class="sphere"></span>
</div>
</div>

CSS code:

html, body {
margin:;
padding:;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: darkslategray;
}
/* 改变盒模型 为元素设定的宽度和高度包括了外内外边距 */
*{
box-sizing: border-box;
}
/* 画出圆环 */
.container{
position: relative;
font-size: 20px;
/* 最后,让容器转动起来,制造小球围绕圆环盘旋的效果 */
animation: rotate 5s linear infinite;
}
.ring{
position: relative;
width: 10em;
height: 10em;
border: 1.5em solid paleturquoise;
border-radius: 50%;
z-index:;
}
/* 在圆环的左上方画出一个小球 */
.sphere{
position: absolute;
top: -20%;
left: -20%;
/* 让小球盘旋 */
width: 80%;
height: 80%;
animation:
rotate 1.5s linear infinite,
overlapping 1.5s linear infinite;
}
/* 通过设置动画延时,制造 3 个小球同时盘旋的效果 */
.sphere:nth-child(2){
animation-delay: -0.5s;
}
.sphere:nth-child(3) {
animation-delay: -1s;
}
@keyframes rotate{
to{
transform: rotate(360deg);
}
}
/* 让小球的圆环的上下穿梭 */
@keyframes overlapping {
to {
z-index:;
}
}
.sphere::after{
content: '';
position: absolute;
width: 3em;
height: 3em;
border-radius: 50%;
background-color: lightseagreen;
}

52.纯 CSS 创作一个小球绕着圆环盘旋的动画的更多相关文章

  1. 前端每日实战:52# 视频演示如何用纯 CSS 创作一个小球绕着圆环盘旋的动画

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

  2. 纯 CSS 创作一个小球绕着圆环盘旋的动画

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

  3. 前端每日实战:149# 视频演示如何用纯 CSS 创作一个宝路薄荷糖的动画

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

  4. 如何用纯 CSS 创作一个小球上台阶的动画

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

  5. 如何用纯 CSS 创作一个小球反弹的动画

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

  6. 前端每日实战:85# 视频演示如何用纯 CSS 创作一个小球反弹的动画

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

  7. 53.纯 CSS 创作一个文本淡入淡出的 loader 动画

    原文地址:https://segmentfault.com/a/1190000015305861 感想:关于两侧动画不在同一水平线上的原因是因为设置其多余高,旋转180度呈现的. HTML code: ...

  8. 如何用纯 CSS 创作一个文本淡入淡出的 loader 动画

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

  9. 前端每日实战:53# 视频演示如何用纯 CSS 创作一个文本淡入淡出的 loader 动画

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

随机推荐

  1. JavaWeb工程 目录结构***

    以下是mavaen推荐的项目目录. ├── pom.xml └── src     ├── main     │   ├── java     │   │   └── group     │   │  ...

  2. js的命名空间 && 单体模式 && 变量深拷贝和浅拷贝 && 页面弹窗设计

    说在前面:这是我近期开发或者看书遇到的一些点,觉得还是蛮重要的. 一.为你的 JavaScript 对象提供命名空间 <!DOCTYPE html> <html> <he ...

  3. uoj #49. 【UR #3】铀仓库

    http://uoj.ac/problem/49 这题二分答案可以做,同时存在另一个直接二分的解法. 考虑对每个点,二分能向左右延伸的最大半径,由于权值范围较大,不能O(1)查询向一侧走指定距离后到达 ...

  4. 网页如何检查浏览器是否安装flash插件

    如果页面需要加载flash插件并且需要提示用户flash下载,这里有个官方很好的js文件只要引用就可以实现 //v1.7 // Flash Player Version Detection // De ...

  5. 浏览器唤起APP的功能

    http://blog.html5funny.com/2015/06/19/open-app-from-mobile-web-browser-or-webview/ http://panli.mu.g ...

  6. C#连接Access数据库显示未在本地计算机注册解决方法

    C#连接数据库时会出错 语句如下 string mystr = @"Provider=Microsoft.ACE.OLEDB.12.0; Data Source=C:\Users\hasee ...

  7. vue之自定义组件

    除了核心功能默认内置的指令外,vue也允许用户注册自定义指令.虽然在vue2.0中,代码复用和抽象的主要形式是组件,但是有些情况下,我们仍需要对普通DOM元素进行底层操作,这个时候就需要用到自定义指令 ...

  8. MySQL数据库解决乱码 latin1 转 gbk

    latin1 也是一种编码,但是有时候它不适合我们正常的使用,所以我需要把它转成gbk编码. 查询数据库编码 show variables like 'character%'; 修改配置文件 my.i ...

  9. [C#][Report]Cry

    本文来自:https://wiki.scn.sap.com/wiki/display/BOBJ/Crystal+Reports%2C+Developer+for+Visual+Studio+Downl ...

  10. Charles问题

    1.内容显示乱码 1.1.使用Charles抓包,text显示乱码,note提示如下 SSL Proxying not enabled for this host: enable in Proxy S ...