有趣的css - 太极八卦图

这篇文章介绍了如何使用CSS创建动态的太极八卦图,涉及nth-of-type选择器、transform-origin、动画和animation-delay的技巧。作者通过实例展示了如何用伪元素和关键帧动画实现不同卦象的旋转效果。
摘要由CSDN通过智能技术生成

大家好,我是 Just,这里是「设计师工作日常」,今天分享的是用css 实现一个动态的太极八卦图。

《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。


整体效果

知识点:
nth-of-type 选择器的使用
② 关于 transformtransform-origin 的使用方式
animation 动画和 animation-delay 延迟参数的使用

思路:先搭建太极阴阳鱼,利用 :before:after 伪元素画出阴阳鱼和鱼眼,然后分别绘制出八个卦象的图形,最后分别给太极阴阳鱼和卦象设置不同的动画参数。


核心代码部分,简要说明了写法思路;完整代码在最后,可直接复制到本地运行。

核心代码

html 代码

<div class="taijibagua">
  <div class="taiji">
    <div class="yu"></div>
  </div>
  <div class="bagua" title="乾 - 天">
  </div>
  <div class="bagua" title="兑 - 泽">
    <div class="white3"></div>
  </div>
  <div class="bagua" title="离 - 火">
    <div class="white2"></div>
  </div>
  <div class="bagua" title="震 - 雷">
    <div class="white2"></div>
    <div class="white3"></div>
  </div>
  <div class="bagua" title="坤 - 地">
    <div class="white1"></div>
    <div class="white2"></div>
    <div class="white3"></div>
  </div>
  <div class="bagua" title="艮 - 山">
    <div class="white1"></div>
    <div class="white2"></div>
  </div>
  <div class="bagua" title="坎 - 水">
    <div class="white1"></div>
    <div class="white3"></div>
  </div>
  <div class="bagua" title="巽 - 风">
    <div class="white1"></div>
  </div>
</div>

太极阴阳鱼以及八卦页面代码部分。

css 部分代码

.taijibagua{
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.taiji{
  width: 100px;
  height: 100px;
  position: relative;
  border-radius: 50%;
  box-shadow: 0px -5px 10px 0px rgba(42,245,152,0.4), 0px 5px 10px 0px rgba(8,174,234,0.4);
  animation: zhuan 5s linear infinite;
}
.taiji:before,.taiji:after{
  content: '';
  width: 100px;
  height: 50px;
  position: absolute;
  background-color: #fff;
  border-radius: 100px 100px 0 0;
}
.taiji:after{
  top: 50px;
  background-color: #000;
  border-radius: 0 0 50px 50px;
}
.yu:before,.yu:after{
  content: '';
  width: 12px;
  height: 12px;
  position: absolute;
  top: 25px;
  left: 50px;
  border-radius: 50%;
  background-color: #000;
  border: 19px solid #fff;
  z-index: 1;
}
.yu:after{
  left: 0;
  background-color: #fff;
  border: 19px solid #000;
}
@keyframes zhuan{
  to {
    transform: rotate(360deg);
  }
}
.bagua{
  width: 40px;
  height: 5px;
  background-color: #2AF598;
  position: absolute;
  top: 0;
  transform-origin: 20px 100px;
  animation: eff49 5s linear infinite;
  opacity: 0.2;
}
.bagua:before,.bagua:after{
  content: '';
  width: 40px;
  height: 5px;
  background-color: #08AEEA;
  position: absolute;
  top: 10px;
}
.bagua:after{
  top: 20px;
  background-color: #000;
}
.taijibagua .bagua:nth-of-type(3){
  transform: rotate(-45deg);
  animation-delay: 4.375s;
}
.taijibagua .bagua:nth-of-type(4){
  transform: rotate(-90deg);
  animation-delay: 3.75s;
}
.taijibagua .bagua:nth-of-type(5){
  transform: rotate(-135deg);
  animation-delay: 3.125s;
}
.taijibagua .bagua:nth-of-type(6){
  transform: rotate(-180deg);
  animation-delay: 2.5s;
}
.taijibagua .bagua:nth-of-type(7){
  transform: rotate(-225deg);
  animation-delay: 1.875s;
}
.taijibagua .bagua:nth-of-type(8){
  transform: rotate(-270deg);
  animation-delay: 1.25s;
}
.taijibagua .bagua:nth-of-type(9){
  transform: rotate(-315deg);
  animation-delay: 0.625s;
}
.white1,.white2,.white3{
  width: 10px;
  height: 7px;
  background-color: #ffffff;
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translate(-50%,0);
  z-index: 10;
}
.white2{
  top: 10px;
}
.white3{
  top: 20px;
}
@keyframes eff49{
  0% {
    opacity: 1;
  }
  100%{
    opacity: 0.2;
  }
}

1、.taiji:before.taiji:after 伪元素分别绘制黑白阴阳鱼的主体, .yu:beforeyu:after 伪元素分别绘制黑白阴阳鱼的小鱼眼,然后设置旋转动画,顺时针旋转。

2、.bagua 配合 .bagua:before.bagua:after 绘制出三条矩形形状,然后利用不同的 .white1.white2.white3 去遮挡分割矩形,来实现不同的卦象

3、页面中的八个 .bagua 通过 transform-origin 定义旋转圆点,然后用 :nth-of-type(n) 选择器分别定义八个卦象的旋转角度,让八个卦象分布在太极阴阳鱼四周

4、最后定义动画参数且使用 animation-delay 来延迟每个卦象的动画启动时间,来实现卦象随着太极阴阳鱼旋转时,不停亮起的效果。

完整代码如下

html 页面

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>太极八卦图</title>
  </head>
  <body>
    <div class="app">
      <div class="taijibagua">
        <div class="taiji">
          <div class="yu"></div>
        </div>
        <div class="bagua" title="乾 - 天">
        </div>
        <div class="bagua" title="兑 - 泽">
          <div class="white3"></div>
        </div>
        <div class="bagua" title="离 - 火">
          <div class="white2"></div>
        </div>
        <div class="bagua" title="震 - 雷">
          <div class="white2"></div>
          <div class="white3"></div>
        </div>
        <div class="bagua" title="坤 - 地">
          <div class="white1"></div>
          <div class="white2"></div>
          <div class="white3"></div>
        </div>
        <div class="bagua" title="艮 - 山">
          <div class="white1"></div>
          <div class="white2"></div>
        </div>
        <div class="bagua" title="坎 - 水">
          <div class="white1"></div>
          <div class="white3"></div>
        </div>
        <div class="bagua" title="巽 - 风">
          <div class="white1"></div>
        </div>
      </div>
    </div>
  </body>
</html>

css 样式

/** style.css **/
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.taijibagua{
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.taiji{
  width: 100px;
  height: 100px;
  position: relative;
  border-radius: 50%;
  box-shadow: 0px -5px 10px 0px rgba(42,245,152,0.4), 0px 5px 10px 0px rgba(8,174,234,0.4);
  animation: zhuan 5s linear infinite;
}
.taiji:before,.taiji:after{
  content: '';
  width: 100px;
  height: 50px;
  position: absolute;
  background-color: #fff;
  border-radius: 100px 100px 0 0;
}
.taiji:after{
  top: 50px;
  background-color: #000;
  border-radius: 0 0 50px 50px;
}
.yu:before,.yu:after{
  content: '';
  width: 12px;
  height: 12px;
  position: absolute;
  top: 25px;
  left: 50px;
  border-radius: 50%;
  background-color: #000;
  border: 19px solid #fff;
  z-index: 1;
}
.yu:after{
  left: 0;
  background-color: #fff;
  border: 19px solid #000;
}
@keyframes zhuan{
  to {
    transform: rotate(360deg);
  }
}
.bagua{
  width: 40px;
  height: 5px;
  background-color: #2AF598;
  position: absolute;
  top: 0;
  transform-origin: 20px 100px;
  animation: eff49 5s linear infinite;
  opacity: 0.2;
}
.bagua:before,.bagua:after{
  content: '';
  width: 40px;
  height: 5px;
  background-color: #08AEEA;
  position: absolute;
  top: 10px;
}
.bagua:after{
  top: 20px;
  background-color: #000;
}
.taijibagua .bagua:nth-of-type(3){
  transform: rotate(-45deg);
  animation-delay: 4.375s;
}
.taijibagua .bagua:nth-of-type(4){
  transform: rotate(-90deg);
  animation-delay: 3.75s;
}
.taijibagua .bagua:nth-of-type(5){
  transform: rotate(-135deg);
  animation-delay: 3.125s;
}
.taijibagua .bagua:nth-of-type(6){
  transform: rotate(-180deg);
  animation-delay: 2.5s;
}
.taijibagua .bagua:nth-of-type(7){
  transform: rotate(-225deg);
  animation-delay: 1.875s;
}
.taijibagua .bagua:nth-of-type(8){
  transform: rotate(-270deg);
  animation-delay: 1.25s;
}
.taijibagua .bagua:nth-of-type(9){
  transform: rotate(-315deg);
  animation-delay: 0.625s;
}
.white1,.white2,.white3{
  width: 10px;
  height: 7px;
  background-color: #ffffff;
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translate(-50%,0);
  z-index: 10;
}
.white2{
  top: 10px;
}
.white3{
  top: 20px;
}
@keyframes eff49{
  0% {
    opacity: 1;
  }
  100%{
    opacity: 0.2;
  }
}

页面渲染效果

以上就是所有代码,以及简单的思路,希望对你有一些帮助或者启发。


[1] 原文阅读


CSS 是一种很酷很有趣的计算机语言,在这里跟大家分享一些 CSS 实例 Demo,为学习者获取灵感和思路提供一点帮助,希望你们喜欢。

我是 Just,这里是「设计师工作日常」,求点赞求关注!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

设计师工作日常

请我炫个饼🫓

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值