龙息绘卷·首章：以CSS重构上古太极图腾！

晷龙烬
21 阅读5分钟

—— 🔥 以龙息淬炼代码，在时光灰烬中重铸技术星河 ！

—— 用渐变与动画构建阴阳漩涡 ！

最终效果预览

图片上传不了，有哪位大佬知道如何解决啊！！！ 评论区求告知！

引言

在数字世界的星河中，有一枚古老图腾正在苏醒。它诞生于《易经》的卦象之间，穿越千年的时光，如今将以代码的形式重生——这就是太极图腾。本文将结合CSS现代特性，通过渐变系统、伪元素和复合动画三重技法，重现这一蕴含东方智慧的动态图腾，让阴阳二气在浏览器中流转不息。

一、太极图的结构与象征意义

太极图的基本结构由两个相互嵌套的圆形组成，其中一个为白色代表阳，另一个为黑色代表阴，中间通过一条S形曲线分隔，象征阴阳的相互转化和依存关系。其外圈是一个大圆，象征宇宙的整体性和无限性。

其核心哲学包括：

  1. 对立统一：阴阳鱼首尾相衔，象征矛盾双方的依存关系
  2. 动态平衡：阴阳面积相等，体现万物均衡发展
  3. 转化循环：S形曲线暗示事物发展的曲折性

二、手绘太极：从圆形到阴阳

第一步：创建画布

 <!DOCTYPE html>
 <html>
 <head>
     <style>
         :root {
             --size: 300px;  /* 控制太极图尺寸 */
         }
         body {
             background: #0a0a12;
             min-height: 100vh;
             display: flex;
             justify-content: center;
             align-items: center;
             margin: 0;
         }
     </style>
 </head>
 <body>
     <!-- 后续步骤在此添加元素 -->
 </body>
 </html>

效果说明：此时浏览器显示黑色背景，中央空白区域待绘制

第二步：绘制基本圆形

 <div class="taiji"></div>
 ​
 <style>
 .taiji {
     width: var(--size);
     height: var(--size);
     border-radius: 50%;
     background: white; /* 临时填充色 */
 }
 </style>

技术要点：

  • border-radius: 50%将方块转为正圆
  • 使用CSS变量var(--size)便于后续调整尺寸

第三步：左右黑白分割

 .taiji {
     background: linear-gradient(to right, 
         #fff 50%, 
         #000 50%
     );
 }

关键参数：

  • to right：定义渐变方向
  • 50%：严格的中线分割

第四步：绘制黑白鱼眼

 .taiji {
  background: 
      /*从元素的左上角开始，颜色从黑色（#000）渐变到白色（#fff），再到透明  */
      radial-gradient(calc(var(--size)/2) calc(var(--size)/2) at calc(var(--size)/2) 25%, 
          #000 20%, #fff 20%, #fff 50%, transparent 50%),
      /*从元素的左下角开始，颜色从白色（#fff）渐变到黑色（#000），再到透明  */
      radial-gradient(calc(var(--size)/2) calc(var(--size)/2) at calc(var(--size)/2) 75%, 
          #fff 20%, #000 20%, #000 50%, transparent 50%),
      linear-gradient(to right, #fff 50%, #000 50%);
 }

关键参数：

  • calc()：用于动态计算CSS属性的值，例如 calc(var(–size)/2)。
  • at 关键字：在径向渐变中使用，用于指定渐变的中心位置。

三、注入动态灵魂

核心旋转动画

 :root {
     --speed: 14s;  /* 新增速度变量 */
 }
 .taiji {
     animation: spin var(--speed) linear infinite;
 }
 @keyframes spin {
     100% { 
         transform: rotate(360deg);
         filter: hue-rotate(10deg); 
     }
 }

动画解析：

  • rotate(360deg)：本体完整旋转
  • 哲学映射：周而复始，生生不息

量子轨道特效

 <!-- 无需修改HTML，使用伪元素 -->
 <style>
 .taiji::after {
     content: '';
     position: absolute;
     width: 10px;
     height: 10px;
     background: rgba(255,255,255,0.8);
     border-radius: 50%;
     top: 50%;
     left: -40px;
     animation: 
         orbit var(--speed) linear infinite,
         sparkle 3s ease-in-out infinite;
 }
 @keyframes orbit {
     0%   { transform: rotate(0deg) translateX(calc(var(--size)/2 + 60px)) rotate(0deg); }
     100% { transform: rotate(720deg) translateX(calc(var(--size)/2 + 60px)) rotate(-720deg); }
 }
 @keyframes sparkle {
     0%, 100% { opacity: 0.6; transform: scale(0.9); }
     50% { opacity: 1; transform: scale(1.1); }
 }
 </style>

轨道原理：

  1. translateX()：确定轨道半径
  2. 双重旋转：抵消本体旋转造成的方向偏移
  3. 哲学映射：行星绕行，象征阴阳生万物

发光阴影效果

 .container {
     position: relative;
     filter: drop-shadow(0 0 15px rgba(255,255,255,0.1));
 }
 .taiji {
     box-shadow: 0 0 50px rgba(0,0,0,0.5);
 }

效果增强：

  • drop-shadow：外发光效果
  • box-shadow：本体立体感
  • 视觉隐喻：太极能量场

四、实践：用双手开启阴阳之门

  1. 复制代码到新建的HTML文件
  2. 用浏览器打开查看效果
  3. 尝试修改CSS变量值观察变化
  4. 添加更多粒子创造星环效果

通过逐步实践，您将在30分钟内掌握CSS绘制动态图形的核心技巧！

​

📜 完整代码

​

 <!DOCTYPE html>
 <html>
 ​
 <head>
     <style>
         :root {
             --size: 300px;
             --speed: 14s;
             /* 新增速度变量 */
             /* 控制太极图尺寸 */
         }
 ​
         body {
             background: #0a0a12;
             min-height: 100vh;
             display: flex;
             justify-content: center;
             align-items: center;
             margin: 0;
         }
 ​
         .taiji {
             width: var(--size);
             height: var(--size);
             border-radius: 50%;
 ​
             animation: spin var(--speed) linear infinite;
 ​
         }
 ​
         .taiji {
             background:
                 radial-gradient(calc(var(--size)/2) calc(var(--size)/2) at calc(var(--size)/2) 25%,
                     #000 20%, #fff 20%, #fff 50%, transparent 50%),
                 radial-gradient(calc(var(--size)/2) calc(var(--size)/2) at calc(var(--size)/2) 75%,
                     #fff 20%, #000 20%, #000 50%, transparent 50%),
                 linear-gradient(to right, #fff 50%, #000 50%);
         }
 ​
         @keyframes spin {
             100% {
                 transform: rotate(360deg);
                 filter: hue-rotate(10deg);
             }
         }
 ​
         .taiji::after {
             content: '';
             position: absolute;
             width: 10px;
             height: 10px;
             background: rgba(255, 255, 255, 0.8);
             border-radius: 50%;
             top: 50%;
             left: -40px;
             animation:
                 orbit var(--speed) linear infinite,
                 sparkle 3s ease-in-out infinite;
         }
 ​
         @keyframes orbit {
             0% {
                 transform: rotate(0deg) translateX(calc(var(--size)/2 + 60px)) rotate(0deg);
             }
 ​
             100% {
                 transform: rotate(720deg) translateX(calc(var(--size)/2 + 60px)) rotate(-720deg);
             }
         }
 ​
         @keyframes sparkle {
 ​
             0%,
             100% {
                 opacity: 0.6;
                 transform: scale(0.9);
             }
 ​
             50% {
                 opacity: 1;
                 transform: scale(1.1);
             }
         }
 ​
         .container {
             position: relative;
             filter: drop-shadow(0 0 15px rgba(229, 60, 14, 0.2));
         }
 ​
         .taiji {
             box-shadow: 0 0 50px rgba(207, 179, 69, 0.5);
         }
     </style>
 </head>
 ​
 <body>
     <div class="container">
         <div class="taiji"></div>
     </div>
 </body>
 ​
 </html>

—— 完 ——

✨ 至此结束 ✨

原创内容✍️，转载请注明出处～感谢支持❤️！请尊重原创📩！ 欢迎在评论区交流🌟！

💡 点赞关注，解锁更多技术干货！

我是 晷龙烬 期待与你的下次相遇～

avatar
文章
阅读
粉丝