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

小灰灰 2022-09-24 01:30 143阅读 0赞

**html代码：**  
<div class="mydiv2">

<div class="div2"></div>

</div>

**css代码：**

@-webkit-keyframes action2\{                                        /\*动画\*/  
            100%\{transform:rotate(360deg);\}  
        \}  
        .div2\{  
            width: 200px;  
            height: 100px;  
            left: 200px;  
            background-color: \#fff;  
            border-bottom: 100px solid \#000;  
            border-radius: 50%;  
            position: relative;  
            transform-origin:100px 300px;  
            -webkit-animation:action2 3s linear 0.1s infinite;  
  
  
        \}  
        .div2:before\{  
            content: "";  
            width: 36px;  
            height: 36px;  
            border: 32px solid \#000;  
            background-color: \#fff;  
            position: absolute;  
            top: 50px;  
            border-radius: 50%;  
        \}  
        .div2:after\{  
            content: "";  
            width: 36px;  
            height: 36px;  
            border: 32px solid \#fff;  
            background-color: \#000;  
            position: absolute;  
            top: 50px;  
            left: 100px;  
            border-radius: 50%;  
        \}  
        .mydiv2\{  
            width: 600px;  
            height: 600px;  
            border: 1px solid \#009900;  
            border-radius: 50%;  
        \}

发表评论取消回复

表情：

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

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

相关阅读

相关 css画圆、半圆、椭圆、圆环

css画圆在css中利用border-radius可以画出我们想要的圆 border-radius属性可以设置盒子四边的圆弧。从上左，上右，下右，下左顺时针依

╰+哭是因爲堅強的太久メ/ 2023年08月17日 16:53/ 0 赞/ 115 阅读

相关 css如何实现画圆

css如何实现画圆 css代码 .circle_process { position: relativ

迷南。/ 2023年06月12日 04:12/ 0 赞/ 7 阅读

相关 css3动画transform-太极图

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

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

相关 css3旋转(绕Y轴)

1.div(id=myDiv)旋转 \myDiv:hover\{ cursor: pointer; -webkit-transform: rotate3d

男娘i/ 2022年09月26日 02:29/ 0 赞/ 274 阅读

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

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

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

相关自动旋转的太极图

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

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

相关旋转的太极图

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

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

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

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

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

相关如何用纯 CSS 创作一个圆环旋转错觉动画

![在这里插入图片描述][20181209121108534.gif] 效果预览 [在线演示][Link 1] 按下右侧的“点击预览”按钮可以在当前页面预览，点击链接

深藏阁楼爱情的钟/ 2022年04月06日 13:52/ 0 赞/ 296 阅读

相关 Css3动画（一）如何画3D旋转效果或者卫星围绕旋转效果

如何画3D旋转效果或者卫星围绕旋转效果，当然这个也是工作中的一个任务，我在网上翻了一下，并没有找到类似的东西，所以写下来还是费了一番功夫，因此我把它拿出来记录一下，当然替换了一

一时失言乱红尘/ 2022年01月09日 10:45/ 0 赞/ 598 阅读