有两个问题请教一下
<!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: 0%;
/*transform-origin: 50% 50%;*/
animation-name: rotate;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
/*animation-direction:reverse;*/
}
@keyframes rotate{
from{
transform:rotate(0deg);
border-bottom:0px solid white;
}
to{
transform:rotate(360deg);
border-bottom:200px solid black;
}
}
div:before{
content: '';
position: absolute;
top: 100px;
width: 20px;
height: 20px;
border: 90px solid red;
background: #fff;
border-radius: 0%;
animation-name: rotate2;
}
div:after{
content: '';
position: absolute;
top: 100px;
right: 0px;
width: 20px;
height: 20px;
border: 89px solid #fff;
background: red;
border-radius: 0%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>老师，我有两个疑问：
我设置border-bottom宽度从0到200，颜色从白到黑，为啥宽度在转到一半的时候就已经到200了？
我网上查了一下，animation没有继承性，但为啥两个伪元素会跟着一起旋转？而下边框却没有跟着父级div一起变？
26
收起
正在回答
2回答
同学你好，老师给你举个例子：
盘子里面有一块蛋糕，当转动盘子的时候，蛋糕相对也是旋转的。当给盘子边缘刷漆的时候，蛋糕是不会被刷漆的哦。
这就是设置父元素旋转，子元素看起来也是旋转的；给父元素添加边框，子元素不会添加边框的效果，自己可以再理解下。
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星