仅使用 CSS 旋转制作八卦迷惑动画 🧘♀️
仅使用 CSS 旋转制作八卦迷惑动画 🧘♀️
Jimmy_is_jimmy
发布于 2022-03-10 14:14:30
发布于 2022-03-10 14:14:30
声明：本文并非原创
实现的效果如下：
我之所以将其拿出来分享，一方面觉得它看起来比较酷，也像原作者所说的那样：看起来是个令人生畏的病毒，另一方面觉得作者的编码思路和代码值得了解学习下。
步骤一：制作八卦图
第一步是使用 CSS 创建阴阳八卦图，如下：
上面仅使用一个 div 元素，配合 ::before 和 ::after 创建伪元素完成。看下面的代码，你应该就懂了：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>yinyang</title>
<style>
body {
background-color: #eee;
}
.yinyang {
position: relative;
background-color: #fff;
height: 100px;
width: 100px;
border-radius: 50%;
background-image: linear-gradient(to left, #fff, #fff 50%, #000 50%, #000);
}
.yinyang::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
background: #fff;
border: 18px solid #000;
border-radius: 50%;
width: 14px;
height: 14px;
}
.yinyang::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background: #000;
border: 18px solid #fff;
border-radius: 50%;
width: 14px;
height: 14px;
}
</style>
</head>
<body>
<div class="yinyang"></div>
</body>
</html>你可以运行上面的代码进行验证
步骤二：整合八卦图
我们需要一个外部的元素 div 对我们生成的两个八卦图进行管理。其实我们相当于又制作了一个大的八卦图，如下：
combine.gif
这里制作的方法跟步骤一的方法大同小异，这里就不进行赘述了。
步骤三：添加动画
下面我们让图动起来。为八卦图添加 animation 动画。
@keyframes roll {
from {
transform: rotate(0deg); // 从零度开始
}
to {
transform: rotate(-360deg); // 旋转一周
}
}当然，我们需要它循环旋转，要在 .yinyang 类中操作：
.yinyang {
animation: roll 4s linear infinite; // 4秒中完成一次匀速动画，并循环播放
}完结
我们来整合下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>yinyang</title>
<style>
body {
background-color: #eee;
}
.circle {
margin-top: 3rem;
box-sizing: border-box;
height: 200px;
width: 200px;
border-radius: 50%;
padding-left: 50px;
background-image: linear-gradient(to left, #fff, #fff 50%, #000 50%, #000);
animation: roll 10s linear infinite;
/* 反向旋转 */
animation-direction: reverse;
}
.yinyang {
position: relative;
background-color: #fff;
height: 100px;
width: 100px;
border-radius: 50%;
background-image: linear-gradient(to left, #fff, #fff 50%, #000 50%, #000);
/* 4秒中完成一次匀速动画，并循环播放 */
animation: roll 4s linear infinite;
}
.yinyang::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
background: #fff;
border: 18px solid #000;
border-radius: 50%;
width: 14px;
height: 14px;
}
.yinyang::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
background: #000;
border: 18px solid #fff;
border-radius: 50%;
width: 14px;
height: 14px;
}
@keyframes roll {
from {
/* 从零度开始 */
transform: rotate(0deg);
}
to {
/* 旋转一周 */
transform: rotate(-360deg);
}
}
</style>
</head>
<body>
<div class="circle">
<div class="yinyang"></div>
<div class="yinyang"></div>
</div>
</body>
</html>至此，整个案例的实现已经完成✅。
后话
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021/11/22 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录