css3实现太极旋转

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

何烨坪Echo

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

阅读量781

点赞数

分类专栏： WEB前端

本文链接：https://blog.csdn.net/heye13/article/details/42033059

版权

WEB前端专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>demo show</title>
<style>
html{ height:100%; }
body{
background-color:#eee;
display:-webkit-flex;
display:flex;
margin:0;
min-height:100%;
}

.go{
-webkit-animation:rotate 4s linear infinite;
background:linear-gradient(#fff 50%, #000 50%);
border-radius:50%;
box-shadow:0 0 10px #ccc;
height:200px;
margin:auto;
position:relative;
transition:.4s;
width:200px;
}
.go:hover{
height:230px;
width:230px;
}
@-webkit-keyframes rotate{ to{ -webkit-transform:rotate(360deg); } }

.go:before,
.go:after{
background:radial-gradient(50% 50%, #fff 20%, #000 20%);
content:"";
border-radius:50%;
height:50%;
left:0;
position:absolute;
top:25%;
width:50%;
}
.go:after{
background:radial-gradient(50% 50%, #000 20%, #fff 20%);
left:50%;
}

</style>
</head>
<body>

<div class="go"></div>

</body>
</html>