前端每日实战: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 可交互视频 此视频是可 ...
随机推荐
- 共克时艰,停工不停学 Serverless 在线课堂免费开课
二月份,Serverless 团队联合腾讯云大学与云+社区免费推出 Serverless 在线直播课程,课程涵盖 Serverless 架构解密.技术解析以及不同应用场景下的最佳实战指导,让你从 0 ...
- 在SpringBoot中使用Junit测试
一:加入依赖 <dependency> <groupId>junit</groupId> <artifactId>junit</artifactI ...
- 5.redis主从配置
Redis的主从复制 1.什么是主从复制 持久化保证了即使redis服务重启也不会丢失数据,因为redis服务重启后会将硬盘上持久化的数据恢复到内存中,但是当redis服务器的硬盘损坏了可能会导致数据 ...
- android手机卫士、3D指南针、动画精选、仿bilibli客户端、身份证银行卡识别等源码
Android精选源码 android身份证.银行卡号扫描源码 android仿bilibili客户端 android一款3D 指南针 源码 android手机卫士app源码 android提醒应用, ...
- 常用的GIT
# 初始化相关 git init git add . git commit -m "test001" git remote origin https://github.com/fa ...
- 安装python第三方包
20190822 先说一下,有4种方法(我知道的): 1.源码安装 2.python自带包管理器安装 3.外部包管理器安装 4.whl格式安装 1.源码安装 Python第三方库几乎都可以在githu ...
- mysql 实现类似开窗函数的功能
mysql8 已经支持开窗函数 https://dev.mysql.com/doc/refman/8.0/en/window-functions.html ———————————————— sql s ...
- freeRadius设置任意账号密码认证通过
[root@wifi_radiusdproxy_16 raddb]# cat users # # Please read the documentation file ../doc/processin ...
- Pivotal tc Server Integration for Eclipse
Pivotal tc Server Integration for Eclipse
- whip|resist|patch|intimate|
a piece of leather or rope that is fastened to a stick, used for hitting animals or people 鞭子,皮鞭 She ...