为什么两个点只显示一半
来源：2-18 编程练习
慕村7338132
2018-07-22 21:57:18
<!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;
}
@keyframes rotate{
from{transform:rotateZ(0deg)}
to{transform:rotateZ(360deg)}
}
div::before{
content:"";
display:block;
width:18px;
height:18px;
border-radius:50%;
border:91px solid red;
position:absolute;
top:100px;
z-index:2;
}
div::after{
content:"";
display:block;
width:18px;
height:18px;
border-radius:50%;
border:90px solid white;
position:absolute;
top:100px;
left:200px;
z-index:2;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
1回答
-
<!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; } @keyframes rotate { from { transform: rotateZ(0deg) } to { transform: rotateZ(360deg) } } div::before { content: ""; display: block; width: 18px; height: 18px; border-radius: 50%; border: 91px solid red; position: absolute; top: 100px; z-index: 2; background: white; } div::after { content: ""; display: block; width: 18px; height: 18px; border-radius: 50%; border: 90px solid white; position: absolute; top: 100px; left: 200px; z-index: 2; background: red; } </style> </head> <body> <div></div> </body> </html>伪元素上加了两个背景颜色就好了
0
相似问题