2-13八卦旋转图小红点不能显示，好像是被覆盖了，不知道怎么改，整个图也不能旋转，求解答
来源：2-18 编程练习
weibo_脂粉乱了丨_0
2018-01-07 16:05:24
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2-5</title>
<style type="text/css">
div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-sizing: border-box;
width: 400px;
height: 400px;
margin: auto;
border: 1px solid red;
border-bottom: 200px solid red;
border-radius: 50%;
transform-origin: 50% 50%;
animation-name: rotate;
animation-duration: 5s;
animation-timing-function: linear;
/*此处写代码*/
@keyframes rotate{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
}
div::before{
content:"";
display:block;
top:100px;
left:0px;
right:0px;
bottom:0px;
position:absolute;
width:200px;
height:200px;
border:-1px solid red;
background-color:red;
border-radius:50%;
} div::after{
content:"";
display:block;
top:90px;
left:199px;
right:0px;
bottom:0px;
position:absolute;
width:200px;
height:200px;
border:-1px solid white;
background-color:white;
border-radius:50%;
}
div>span::before{
content:"";
display:block;
top:160px;
left:70px;
right:0px;
bottom:0px;
position:absolute;
width:50px;
height:50px;
border:1px solid white;
background-color:white;
border-radius:50%;
}
div>span::after{
content:"";
display:block;
top:160px;
left:200px;
right:0px;
bottom:0px;
position:absolute;
width:50px;
height:50px;
border:1px solid red;
background-color:red;
border-radius:50%;
}
</style>
</head>
<body>
<div><span></span></div>
</body>
</html>5回答
-
首先您说的红点不能显示，加个优先级就行了，在div>span::after这里加个z-index:999，然后您再自己定位到自己想要的位置
然后就是不能旋转的问题，要把
@keyframes rotate{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
这个代码写到下面去，不能在div标签里面
最后就是要实现无限旋转，在最上面的div标签下加上这段代码即可animation-iteration-count:infinite
希望能帮助到您
0h018-01-08 -
Miss路
2018-01-09
box-sizing 属性允许以特定的方式定义匹配某个区域的特定元素，
box-sizing: border-box;为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
祝学习愉快！
0 -
qq_浅仓小星_0
2018-01-08
div::before,
div::after{
content:"";
position: absolute;
top:100px;
width:40px;
height:40px;
border-radius: 50%;
}
div::before{
background:#fff;
border:80px solid #f00;
}
div::after{
background:#f00;
border:80px solid #fff;
right:0;
}
我是这么写的代码，你也可以看一下，应该能看明白吧，我是把里面的白色小圆定义成40像素，再把外面的红色边框设置成80像素，其实就跟正方形一个原理，这里是圆而已
box-sizing: border-box这个属性前面的课没讲过，网上查了下感觉也没明白
0h018-01-09 -
qq_浅仓小星_0
2018-01-08
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2-5</title>
<style type="text/css">
div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-sizing: border-box;
width: 400px;
height: 400px;
margin: auto;
border: 1px solid red;
border-bottom: 200px solid red;
border-radius: 50%;
transform-origin: 50% 50%;
animation-name: rotate;
animation-duration: 5s;
animation-timing-function: linear;
/*此处写代码*/
animation-iteration-count:infinite;
}
div::before{
content:"";
display:block;
top:100px;
left:0px;
right:0px;
bottom:0px;
position:absolute;
width:200px;
height:200px;
border:-1px solid red;
background-color:red;
border-radius:50%;
} div::after{
content:"";
display:block;
top:90px;
left:199px;
right:0px;
bottom:0px;
position:absolute;
width:200px;
height:200px;
border:-1px solid white;
background-color:white;
border-radius:50%;
}
div>span::before{
content:"";
display:block;
top:160px;
left:70px;
right:0px;
bottom:0px;
position:absolute;
width:50px;
height:50px;
border:1px solid white;
background-color:white;
border-radius:50%;
}
div>span::after{
content:"";
display:block;
top:160px;
left:270px;
right:0px;
bottom:0px;
position:absolute;
width:50px;
height:50px;
border:1px solid red;
background-color:red;
border-radius:50%;
z-index:99;
}
@keyframes rotate{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
</style>
</head>
<body>
<div><span></span></div>
</body>
</html>
帮你改了，你看下
0 -
Miss路
2018-01-08
你写的太复杂，可以参考这个：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>2-5</title> <style type="text/css"> div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box; width: 400px; height: 400px; margin: auto; border: 1px solid red; border-bottom: 200px solid red; border-radius: 50%; transform-origin: 50% 50%; animation-name: rotate; animation-duration: 5s; animation-timing-function: linear; /*此处写代码*/ animation-iteration-count: infinite; } div:before { position: absolute; top: 100px; box-sizing: border-box; width: 199px; height: 199px; content: ''; border: 75px solid red; border-radius: 50%; background: white; } div:after { position: absolute; top: 100px; right: 0; box-sizing: border-box; width: 199px; height: 199px; content: ''; border: 75px solid white; border-radius: 50%; background: red; } @keyframes rotate { form { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style> </head> <body> <div></div> </body> </html>祝学习愉快！
0h018-01-08
相似问题