您的位置：首页 > Web前端 > CSS

css3实现旋转太极图

2017-11-13 16:50 260 查看
话不多说，先看效果图：



实现过程如下：

1.首先放三个盒子，分别为大背景以及上面的两个小圆。

<div id="" class="divClass">
<div id="" class="left">
</div>
<div id="" class="right">
</div>
</div>


2.巧用border、after、before实现大背景图。

.divClass {
border: 100px solid ;
border-color: white white black black;
width: 0;
height: 0;
border-radius: 100%;
position: absolute;
top: 100px;
left: 100px;
box-shadow: 0 0 50px #707070;
}
.divClass:before {
content: "";
position: absolute;
top: -85px;
left: -85px;
width: 100px;
height: 100px;
background-color: black;
border-radius: 100%;
}
.divClass:after {
content: "";
position: absolute;
top: -15px;
left: -14px;
width: 100px;
height: 100px;
background-color: white;
border-radius: 100%;
}




3.画出上面的两个小圆

.left{
background-color:white;
width:50px;
height: 50px;
position: relative;
border-radius: 100%;
top: -65px;
left: -65px;
}
.right{
background-color:black;
width:50px;
height: 50px;
position: relative;
border-radius: 100%;
top: -40px;
left: 15px;
z-index: 1;    /*若是不设置的话，父元素的after会覆盖这部分内容*/
}




4.整体加上动画，让旋转起来。

.divClass {
border: 100px solid ;
border-color: white white black black;
width: 0;
height: 0;
border-radius: 100%;
position: absolute;
top: 100px;
left: 100px;
transform-origin: 50% 50%;       /*设置以中心为原点进行旋转*/
animation: run 2.5s linear infinite;    /*执行动画run，每次执行时间为2.5s ,从开头到结尾以相同的速度来播放动画，重复播放*/
box-shadow: 0 0 50px #707070;
}
@keyframes run{         /*定义动画run的具体动作*/
from{
transform: rotate(0deg);
}
/*50%{
transform: rotate(180deg);
}*/
to{
transform: rotate(360deg);
}
}


完整代码如下：

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}

.divClass {
border: 100px solid ;
border-color: white white black black;
width: 0;
height: 0;
border-radius: 100%;
position: absolute;
top: 100px;
left: 100px;
transform-origin: 50% 50%;       /*设置以中心为原点进行旋转*/
animation: run 2.5s linear infinite;    /*执行动画run，每次执行时间为2.5s ,从开头到结尾以相同的速度来播放动画，重复播放*/
box-shadow: 0 0 50px #707070;
}
@keyframes run{
from{
transform: rotate(0deg);
}
/*50%{
transform: rotate(180deg);
}*/
to{
transform: rotate(360deg);
}
}

.divClass:before {
content: "";
position: absolute;
top: -85px;
left: -85px;
width: 100px;
height: 100px;
background-color: black;
border-radius: 100%;
}
.divClass:after {
content: "";
position: absolute;
top: -15px;
left: -14px;
width: 100px;
height: 100px;
background-color: white;
border-radius: 100%;
}
.left{
background-color:white;
width:50px;
height: 50px;
position: relative;
border-radius: 100%;
top: -65px;
left: -65px;
}
.right{
background-color:black;
width:50px;
height: 50px;
position: relative;
border-radius: 100%;
top: -40px;
left: 15px;
z-index: 1;    /*若是不设置的话，父元素的after会覆盖这部分内容*/
}
</style>
</head>

<body>
<div id="" class="divClass">
<div id="" class="left">
</div>
<div id="" class="right">
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航