关于2-13编程练习？
来源：2-18 编程练习
慕尼黑2567969
2017-11-10 16:09:28
这2个八卦圈要怎么做？
2回答
-
Harbird
2018-04-14
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2-5</title>
<style type="text/css">
hgroup{ /*组合整体旋转*/
position: absolute;
margin:auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
animation-name: rotate;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count:infinite;
}
.div1 { /*一个大圈*/
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-sizing: border-box;
width: 400px;
height: 400px;
margin: auto;
border: 1px solid black;
border-bottom: 200px solid black;
border-radius: 50%;
transform-origin: 50% 50%;
/*此处写代码*/
}
.div2{ /*左边中圈*/
margin:auto;
position:absolute;
float:left;
width:198px;
height:198px;
border:1px solid black;
background:black;
border-radius: 50%;
top: 0;
right: 0;
bottom: 0;
left: -200px;
}
.div3{/*右边中圈*/
margin:auto;
position:absolute;
width:198px;
height:198px;
border:1px solid #fff;
background:#fff;
border-radius: 50%;
top: 0;
right: 0;
bottom: 0;
left: 199px;
}
.div4{/*左边小圈*/
margin:auto;
position:absolute;
float:left;
width:50px;
height:50px;
border:1px solid #fff;
background:#fff;
border-radius: 50%;
top: 0;
right: 0;
bottom: 0;
left: -200px;
}
.div5{/*右边小圈*/
margin:auto;
position:absolute;
width:50px;
height:50px;
border:1px solid #000;
background:#000;
border-radius: 50%;
top: 0;
right: 0;
bottom: 0;
left: 199px;
}
@keyframes rotate{
from{transform:rotatez(0deg);}
to{transform:rotatez(360deg);}
}
</style>
</head>
<body>
<hgroup>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
</hgroup>
</body>
</html>
1 -
Miss路
2017-11-10
这个是思路，参考一下，结合所学的只是，根据以下的提示试一下：
1、创建一个div，用css控制其大小、边框、位置等，做成一个静态的圆形，一半为红色一半为白色。
2、用div的伪元素绘制两个圆环并放置适合位置使其成为一个太极图案。
3、创建动画。
4、定义动画的重复属性，让其循环播放。
祝学习愉快！
0
相似问题