前端每日实战:52# 视频演示如何用纯 CSS 创作一个小球绕着圆环盘旋的动画
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
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 创作一个小球绕着圆环盘旋的动画的更多相关文章
- 52.纯 CSS 创作一个小球绕着圆环盘旋的动画
原文地址:https://segmentfault.com/a/1190000015295466 感想:重点在小球绕环转动. HTML code: <div class="contai ...
- 前端每日实战:149# 视频演示如何用纯 CSS 创作一个宝路薄荷糖的动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oagrvz 可交互视频 此视频是可 ...
- 前端每日实战:53# 视频演示如何用纯 CSS 创作一个文本淡入淡出的 loader 动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/ERwpeG 可交互视频 此视频是可 ...
- 前端每日实战:160# 视频演示如何用纯 CSS 创作一个打开内容弹窗的交互动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/GYXvez 可交互视频 此视频是可 ...
- 前端每日实战:85# 视频演示如何用纯 CSS 创作一个小球反弹的动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OwWROO 可交互视频 此视频是可 ...
- 前端每日实战:23# 视频演示如何用纯 CSS 创作一个菜单反色填充特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/qYMoPo 可交互视频教程 此视频是 ...
- 前端每日实战:46# 视频演示如何用纯 CSS 创作一个在容器中反弹的小球
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jKVbyE 可交互视频教程 此视频 ...
- 前端每日实战:11# 视频演示如何用纯 CSS 创作一个荧光脉冲 loader 特效
效果预览 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视频是可以交 ...
- 前端每日实战:157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画(实际上每一行都是平行的)
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VEyoGj 可交互视频 此视频是可 ...
随机推荐
- [LC] 273. Integer to English Words
Convert a non-negative integer to its english words representation. Given input is guaranteed to be ...
- qsub|pasta|
cd /xxx/genome_stat/Annotation ln -s /xxx/02.annotation/gff_v2/*.homolog.v2.gff /xxx/genome_stat/Ann ...
- Linux 杀死进程方法大全(kill,killall)
杀死进程最安全的方法是单纯使用kill命令,不加修饰符,不带标志. 首先使用ps -ef命令确定要杀死进程的PID,然后输入以下命令: # kill -pid 注释:标准的kill命令通常 ...
- ABC Fennec VS. Snuke
题目描述 Fennec and Snuke are playing a board game. On the board, there are N cells numbered 1 through N ...
- [LC] 55. Jump Game
Given an array of non-negative integers, you are initially positioned at the first index of the arra ...
- [LC] 48. Rotate Image
You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwise). ...
- MOOC(5)- mock模拟返回响应数据
1.安装mock 1)pip install mock 2)或者下载离线安装包 2.mock散装使用 import unittest from mock import mock from day_20 ...
- PP图|QQ图|正态性检验|K-S检验|S-W检验|
应用统计学: 物理条件一致时,有理由认为方差是一致的.配对检验可排除物理影响,使方差变小,但是自由度降低了,即样本数变小.二项分布均值假设检验的模型要依据前面的假设条件: PP图统计图要看中间的贴近情 ...
- eclipse中maven项目failonmissingwebxml错误的修复(转)
在使用eclipse创建maven项目的时候,有时候会出现这个问题: web.xml is missing and 'failOnMissingWebXml' is set to true我遇到这个问 ...
- Pandas写excel总结:写入多个sheet、1个sheet写入多行、向已有sheet追加数据
1.最简单最基础的写:1excel1sheet df.to_excel("test.xlxs") 2.在一个excel文件里面写入多个sheet writer=pd.ExcelWr ...