效果预览

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

https://codepen.io/comehope/pen/gKxyWo

可交互视频

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/p/pEgDAM/cg48mty

源代码下载

每日前端实战系列的全部源代码请从 github 下载:

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom,容器中包含一个圆环和3个小球:

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

居中显示:

body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: darkslategray;
}

改变盒模型:

* {
box-sizing: border-box;
}

画出圆环:

.container {
position: relative;
font-size: 20px;
} .ring {
position: relative;
width: 10em;
height: 10em;
border: 1.5em solid paleturquoise;
border-radius: 50%;
}

在圆环的左上方画出一个小球:

.sphere {
position: absolute;
top: -20%;
left: -20%;
} .sphere::after {
content: '';
position: absolute;
width: 3em;
height: 3em;
background-color: lightseagreen;
border-radius: 50%;
}

让小球在圆环的左上方盘旋:

.sphere {
width: 80%;
height: 80%;
animation: rotate 1.5s linear infinite;
} @keyframes rotate {
to {
transform: rotate(360deg);
}
}

让小球的圆环的上下穿梭:

.ring {
z-index: 2;
} .sphere {
animation:
rotate 1.5s linear infinite,
overlapping 1.5s linear infinite;
} @keyframes overlapping {
to {
z-index: 2;
}
}

通过设置动画延时,制造 3 个小球同时盘旋的效果:

.sphere:nth-child(2) {
animation-delay: -0.5s;
} .sphere:nth-child(3) {
animation-delay: -1s;
}

最后,让容器转动起来,制造小球围绕圆环盘旋的效果:

.container {
animation: rotate 5s linear infinite;
}

大功告成!

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

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

    原文地址:https://segmentfault.com/a/1190000015295466 感想:重点在小球绕环转动. HTML code: <div class="contai ...

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

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

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

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

  4. 前端每日实战:160# 视频演示如何用纯 CSS 创作一个打开内容弹窗的交互动画

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

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

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

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

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

  7. 前端每日实战:46# 视频演示如何用纯 CSS 创作一个在容器中反弹的小球

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

  8. 前端每日实战:11# 视频演示如何用纯 CSS 创作一个荧光脉冲 loader 特效

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

  9. 前端每日实战:157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画(实际上每一行都是平行的)

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

随机推荐

  1. [LC] 273. Integer to English Words

    Convert a non-negative integer to its english words representation. Given input is guaranteed to be ...

  2. qsub|pasta|

    cd /xxx/genome_stat/Annotation ln -s /xxx/02.annotation/gff_v2/*.homolog.v2.gff /xxx/genome_stat/Ann ...

  3. Linux 杀死进程方法大全(kill,killall)

    杀死进程最安全的方法是单纯使用kill命令,不加修饰符,不带标志.   首先使用ps -ef命令确定要杀死进程的PID,然后输入以下命令:   # kill -pid   注释:标准的kill命令通常 ...

  4. ABC Fennec VS. Snuke

    题目描述 Fennec and Snuke are playing a board game. On the board, there are N cells numbered 1 through N ...

  5. [LC] 55. Jump Game

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...

  6. [LC] 48. Rotate Image

    You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwise). ...

  7. MOOC(5)- mock模拟返回响应数据

    1.安装mock 1)pip install mock 2)或者下载离线安装包 2.mock散装使用 import unittest from mock import mock from day_20 ...

  8. PP图|QQ图|正态性检验|K-S检验|S-W检验|

    应用统计学: 物理条件一致时,有理由认为方差是一致的.配对检验可排除物理影响,使方差变小,但是自由度降低了,即样本数变小.二项分布均值假设检验的模型要依据前面的假设条件: PP图统计图要看中间的贴近情 ...

  9. eclipse中maven项目failonmissingwebxml错误的修复(转)

    在使用eclipse创建maven项目的时候,有时候会出现这个问题: web.xml is missing and 'failOnMissingWebXml' is set to true我遇到这个问 ...

  10. Pandas写excel总结:写入多个sheet、1个sheet写入多行、向已有sheet追加数据

    1.最简单最基础的写:1excel1sheet df.to_excel("test.xlxs") 2.在一个excel文件里面写入多个sheet writer=pd.ExcelWr ...