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

最新推荐文章于 2022-09-17 08:59:56 发布

70kggg

最新推荐文章于 2022-09-17 08:59:56 发布

阅读量457

点赞数

分类专栏：有点意思文章标签：太极旋转 CSS

有点意思专栏收录该内容

6 篇文章 0 订阅

订阅专栏

画个会旋转的太极：

以下部分直接赋值粘贴就好了

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="yin-yang"></div>
</body>
</html>

CSS部分：

.box-taiji {width:0;height:400px;position:relative;margin:50px auto;border-left:200px solid #000;border-right:200px solid #fff;box-		shadow:0 0 30px rgba(0,0,0,.5);border-radius:400px;animation:rotation 2.5s linear infinite;-webkit-animation:rotation 2.5s linear infinite;-moz-animation:rotation 2.5s linear infinite;}
.box-taiji:before,
.box-taiji:after {position:absolute;content:"";display:block;}
.box-taiji:before {width:200px;height:200px;top:0;left:-100px;z-index:1;background-color:#fff;border-radius:50%;box-shadow:0 200px 0 #000;}
.box-taiji:after {width:60px;height:60px;top:70px;left:-30px;z-index:2;background-color:#000;border-radius:50%;box-shadow:0 200px 0 #fff;}

@keyframes rotation {
0% {transform:rotate(0deg);}
100% {transform:rotate(-360deg);}
}
@-webkit-keyframes rotation {
0% {-webkit-transform:rotate(0deg);}
100% {-webkit-transform:rotate(-360deg);}
}
@-moz-keyframes rotation {
0% {-moz-transform:rotate(0deg);}
100% {-moz-transform:rotate(-360deg);}
}

效果图预览：

会旋转的太极：https://70kg111.github.io/TaiJi/index.html

原作者出处：

https://www.cnblogs.com/huanlei/p/4031052.html

70kggg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
（转）CSS实现一个会旋转的太极图案

画个会旋转的太极：以下部分直接赋值粘贴就好了HTML部分：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;meta name="viewport" content="width=device-width, initial-scal
复制链接

扫一扫