一个盒子完成太极图

曾经终败给现在 2023-02-28 04:17 7阅读 0赞

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { 
    			margin: 0;
    			padding: 0;
    		}
    		body { 
    			background-color: skyblue;
    		}
    		div { 
    			width: 200px;
    			height: 400px;
    			background-color: #fff;
    			border-left: 200px solid #000;
    			margin: 50px auto;
    			border-radius: 50%;
    
    			transition: all .6s ease-in-out;
                -webkit-transition: all .6s ease-in-out;
                -moz-transition: all .6s ease-in-out;
                -o-transition: all .6s ease-in-out;
    		}
    		div::before,div::after { 
    			content: "";
    			display: block;
    			width: 50px;
    			height: 50px;
    			border-radius: 50%;
    			margin-left: -100px;
    		}
    		div::before { 
    			background-color: #fff;
    			border: 75px solid #000;
    		}
    		div::after { 
    			background-color: #000;
    			border: 75px solid #fff;
    		}
    		div:hover { 
    			transform: rotate(360deg);
                -webkit-transform: rotate(360deg);
                -moz-transform: rotate(360deg);
                -o-transform: rotate(360deg);
                -ms-transform: rotate(360deg);
    		}
    	</style>
    </head>
    <body>
    	<div></div>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70]: /images/20230209/5f6742318e034c06a221d5b1b42970fd.png

发表评论取消回复

表情：

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

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

相关阅读

相关 JAVA代码画太极图

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

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

相关一个盒子完成太极图

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

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

相关 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 赞/ 164 阅读

相关在DW中做出一个灰色太极图

1：创建一个css，然后再引用这个css，方便我们对一些HTML进行css样式处理，然后再到css中把body的背景设为灰色； 2：创建完css以后，先做出太极图外面的大圆

妖狐艹你老母/ 2022年02月13日 13:47/ 0 赞/ 271 阅读

相关完成一个版块

完成一个版块任务描述相关知识外阴影多行省略设置圆角代码文件任务描述本关任务

骑猪看日落/ 2021年05月16日 20:37/ 0 赞/ 436 阅读