如何用一个div做可以旋转的太极图

最新推荐文章于 2020-07-01 23:16:47 发布

-常见-

最新推荐文章于 2020-07-01 23:16:47 发布

阅读量352

点赞数 1

分类专栏：前端文章标签： html css3 animation

本文链接：https://blog.csdn.net/qq_37985836/article/details/106241664

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

如何用一个div做可以旋转的太极图

代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>太极图</title>
</head>
	<style>
		.box-taiji{
            width:0px;
            height:300px;
            position:relative;
            margin: 50px auto;
            border-left:150px solid #000;
            border-right:150px solid #fff;
            box-shadow: 0 0 30px rgba(0,0,0,0.6);
            border-radius: 300px;
            animation: rotate 3s linear infinite; 
        }
        @keyframes rotate{
            from{transform: rotate(360deg)}
            to{transform: rotate(0deg)}
        }
        .box-taiji:after{
            width:150px;
            height:150px;
            position:absolute;
            content: '';
            display: block;
            top:0;
            left:-75px;
            z-index: 1;
            background-color: #fff;
            border-radius:50%;
            box-shadow:0 150px 0 #000;
        }
        .box-taiji:before {
            content:'';
            position:absolute;
            display: block;
            width:75px;
            height:75px;
            top:38px;
            left:-38px;
            z-index:2;
            background-color:#000;
            border-radius:50%;
            box-shadow:0 150px 0 #fff;
        }
	</style>
<body>
	<div class="box-taiji"></div>
</body>
</html>