关于画面抖动

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>2-5</title>
    <style type="text/css">
        body{
                 overflow: hidden;
        }
        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::after,div::before{
            content: "";
            display: block;
            width: 200px;
            height: 200px;
            box-sizing: border-box;
            border-radius: 50%;
            position: absolute;
        }
        div::after{
            background-color: #fff;
            border: 85px solid red;
            right: 0px;
            top:100px;
        }
         div::before{
            border-radius: 50%;
            background-color: red;
            border: 85px solid #fff;
            left: 0px;
            top:100px;
        }
        @keyframes rotate{
            from {transform:rotate(0deg)}
            to   {transform:rotate(360deg)}
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

请问为什么加上 body{over：hidden} 动画开始播放就没有抖动老师可以解释下原理吗

hy_wang 2018-05-17

源自：CSS3动画 2-17 编程练习

收起

1回答

妮可妮可妮_ 2018-05-18 16:32:35

这个DIV处于旋转状态,如果 overflow默认为 auto,当它旋转到超过当前页面的高度的时候,右侧会出现滚动条,于是画面就会抖动,overflow:hidden 就避免了滚动条的出现,当超过高度的时候超出部分就隐藏了.

收起回答

离离钟 #1

老师如果我用display: inline-block;为什么还是会抖动，这个不是转换为行内块元素吗。我自己设置了宽度后，那应该不会横向占满浏览器的宽度，这样旋转起来就不会出现滚动条了。可为什么div还是占满了宽度。滚动条还是会出现。。

2018-08-17 14:57:43
妮可妮可妮_ 回复离离钟 #2

请同学在问答区新建问题并将完整代码上传（不要截图代码，因为手动输入的有可能和上传的代码有差异），以便更好的检测和解决问题，祝学习愉快。

2018-08-17 15:14:47