老师，为什么我的动图好奇怪啊？

<!DOCTYPE html>

<html>

<head>

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:rotate(0deg);}

to{transform:rotate(360deg);}

}

div::before{

top:50%;

position:absolute;

content:"";

display:block;

width: 30px;

height: 30px;

border:85px red solid;

border-radius:50%;

background-color:white;

}

div::after{

top:50%;

left:50%;

position:absolute;

content:"";

display:block;

width: 30px;

height: 30px;

border:85px white solid;

border-radius:50%;

background-color:red;

}

</style>

</head>

<body>

</body>

</html>

慕斯卡3605978 2020-02-22

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

收起

2回答

好帮手慕码 2020-02-23 09:28:16

同学你好，解答如下：

（1）overflow:hidden;是针对body元素超出隐藏的，里面的元素大小不会改变。

（2）设置宽度没有依据，可以通过简单的调试实现。

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

收起回答

好帮手慕夭夭 2020-02-22 19:03:23

同学你好，是因为转动过程中，有时会出现滚动条。如下：

滚动条显示时，页面就会颤动一下，所以感觉奇怪。可以为页面设置超出隐藏：

另外，里面的小盒子盖住大盒子的边框了。

建议调整小盒子宽度：

红色小盒子与大盒子边框颜色一样，所以盖住也没有关系看不出来。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

收起回答

提问者慕斯卡3605978 #1

①overflow:hidden;是针对body里面的元素溢出隐藏吗？就是无论里面的大小如何，body的长宽不变？ ②小盒子的边框长度设置以及小盒子本身长度的设置有没有什么依据啊？我是通过一点点改的，也不知道有没有准确一点的值。

2020-02-22 19:33:46