CSS实现太极图案

墨蓝 2022-02-20 14:37 164阅读 0赞

1.  知识点  
    伪类：实现太极中两个空心圆  
    边框、背景：边框大于背景，实现空心小圆  
    CSS3动画：实现太极无限旋转
2.  代码

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>JS Bin</title>
      <style>
      	body{
      background:gray;
    }
    //外面大圆
    #yin-yang{ 
      width:200px;
      height:200px;
      border-radius:50%;
      background: linear-gradient(to bottom, rgba(255,255,255,1) 47%,rgba(255,255,255,1) 47%,rgba(0,0,0,1) 54%,rgba(0,0,0,1) 99%);
      position:relative;
      margin:20px auto;
      animation-name: spin;
      animation-duration: 4000ms;
      animation-iteration-count: infinite;
      animation-timing-function: linear; 
    }
    //左边黑色小圆
    #yin-yang:after{
      display:block;
      width:20px;
      height:20px;
      background:#fff;
      content:"";
      border-radius:50%;
      position:absolute;
      top:50px;
      border:40px solid #000;
    }
    //右边白色小圆
    #yin-yang:before{
      display:block;
      width:20px;
      height:20px;
      background:#000;
      content:"";
      border-radius:50%;
      position:absolute;
      top:50px;
      right:0;
      border:40px solid #fff;
    }
    @keyframes spin { 
      from { 
        transform: rotate(0deg); 
      } to { 
        transform: rotate(360deg); 
      }
    }
    p{text-align:center;}
      </style>
    </head>
    <body>
    <div id="yin-yang">
    </div>
      <p>  一生二,二生三,三生万物</p>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，164人围观）

还没有评论，来说两句吧...

相关阅读

相关 JAVA代码画太极图

package img; import javax.imageio.ImageIO; import java.awt.; import

比眉伴天荒/ 2023年10月01日 15:57/ 0 赞/ 11 阅读

相关 CSS实现太极图（1个div实现）

使用一个div实现太极图的步骤如下： HTML部分： <body> <div class="box-taiji"> </div>

桃扇骨/ 2023年06月03日 09:54/ 0 赞/ 48 阅读

相关一个盒子完成太极图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

曾经终败给现在/ 2023年02月28日 04:17/ 0 赞/ 8 阅读

相关 css3动画transform-太极图

学习动画，记录一下。 HTML部分：类似图标，所以用了i标签。 <i class="taichi"></i> css部分： .taichi {

爱被打了一巴掌/ 2022年12月15日 03:39/ 0 赞/ 170 阅读

相关 canvas js太极图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

以你之姓@/ 2022年12月10日 12:27/ 0 赞/ 98 阅读

相关 CSS3画八卦太极图（绕一个圆旋转）

html代码： <div class="mydiv2"> <div class="div2"></div> </div> css代码： @-we

小灰灰/ 2022年09月24日 01:30/ 0 赞/ 155 阅读

相关自动旋转的太极图

首先我们先看一个效果图 ![Center][] 首先创建一个工程 ![Center 1][] 创建一个继承自UIview的类TaijiView然后再.h文件中创建两个变

淩亂°似流年/ 2022年07月14日 12:12/ 0 赞/ 208 阅读

相关旋转的太极图

刚刚在网上看见一个太极图做loading，但是作者居然无良的不给效果图，于是我就气愤的给它实现了。果然是丑啊！希望不要丑哭！！源码非常简单，已经全部注释好了！

蔚落/ 2022年07月14日 07:13/ 0 赞/ 183 阅读

相关（转）CSS实现一个会旋转的太极图案

画个会旋转的太极：以下部分直接赋值粘贴就好了 HTML部分： <!DOCTYPE html> <html lang="en"> <head>

ゞ浴缸里的玫瑰/ 2022年05月09日 11:36/ 0 赞/ 223 阅读

相关 CSS实现太极图案

1. 知识点伪类：实现太极中两个空心圆边框、背景：边框大于背景，实现空心小圆 CSS3动画：实现太极无限旋转 2. 代码

墨蓝/ 2022年02月20日 14:37/ 0 赞/ 165 阅读