动画抖动问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2-5</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div {
position: absolute;
height: 400px;
width: 400px;
border: 1px solid red;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
border-bottom: 200px solid red;
box-sizing: border-box;
border-radius: 50%;
animation-name: rotate;
animation-duration:2s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
}
div::before{
display: block;
content: " ";
position: absolute;
height: 200px;
width: 200px;
background-color: red;
border: 80px solid white;
box-sizing: border-box;
border-radius: 50%;
top: 100px;
left: 0px;
}
div::after{
display: block;
content: " ";
position: absolute;
height: 200px;
width: 200px;
background-color:white;
border: 80px solid red;
box-sizing: border-box;
border-radius: 50%;
top: 100px;
right: 0px;
}
@keyframes rotate{
form{transform: rotate(0deg);}
to{transform:rotate(360deg);}
}
</style>
</head>
<body>
<div></div>
</body>
</html>动画页面好像有点抖动，怎么回事？
8
收起
正在回答
1回答
同学你好，动画没有抖动。在旋转时，图像会超出屏幕，有的时候会出现滚动条。滚动的过程中，滚动条出现或者消失可能给同学造成了抖动的视觉效果。动画本身是没有问题的。
同学可以给body元素设置溢出隐藏，就没有这种问题了，如下：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星