html 平滑放大缩小,HTML – 如何平滑宽度和高度的过渡？

原因:(没有链接/来源备份,这只是一个有根据的猜测)

我在过去遇到了类似的情况,我设法发现的是由于(我相信)子像素渲染问题而发生抖动.

当高度和宽度转换时,元素的更新似乎逐个像素地发生.例如,在下面的片段中有两个div元素,其高度和宽度正在转换(第一个增加3px超过5s而第二个增加5px).这里要注意的关键是,对于第一个div,有三个可见步骤,而第二个步骤有五个步骤(意味着它们逐个像素地增加).

div{

display: inline-block;

height: 100px;

width: 100px;

background: red;

border: 1px solid;

margin: 10px;

transition: all 5s linear;

}

div:nth-child(1):hover{

height: 103px;

width: 103px;

}

div:nth-child(2):hover{

height: 105px;

width: 105px;

}

现在你会问我这与震动有什么联系.连接是高度和宽度逐像素增加但转换(-50％, – 50％)意味着没有.用于转换元素的px有时是分数,似乎在实际转换期间发生了一些修正以克服这些小数值.

解决方案:(或解决方案)

而不是使用平移(-50％, – 50％)技巧进行水平垂直居中,如果我们通过提供顶部和左侧像素直接定位元素,您会发现没有抖动.根据我的理解,这是因为浏览器逐个像素地转换所有4个属性(高度,宽度,顶部和左侧),因此没有导致校正的小数值.

(在最新的Chrome Windows 10上测试过.)

#container {

border: 1px solid black;

width: 600px;

height: 600px;

position: relative;

}

#circle {

margin: 0;

padding: 0;

border: 1px solid black;

width: 50px;

height: 50px;

border-radius: 50%;

position: absolute;

top: 275px;

left: 275px;

overflow: hidden;

transition: all 0.2s;

}

#circle a {

margin: 0;

display: block;

padding: 0;

width: 250px;

height: 220px;

position: absolute;

top: 50%;

left: 50%;

transform-origin: 0 0;

}

#circle a:hover {

opacity: 0.5;

cursor: pointer;

}

#trap1 {

background-color: green;

transform: rotate(0deg) skewX(30deg);

}

#trap2 {

background-color: yellow;

transform: rotate(60deg) skewX(30deg);

}

#trap3 {

background-color: red;

transform: rotate(120deg) skewX(30deg);

}

#trap4 {

background-color: blue;

transform: rotate(180deg) skewX(30deg);

}

#trap5 {

background-color: orange;

transform: rotate(240deg) skewX(30deg);

}

#trap6 {

background-color: purple;

transform: rotate(300deg) skewX(30deg);

}

#hide {

position: absolute;

top: 50%;

left: 50%;

z-index: 1;

transform: translate(-50%, -50%);

width: 50px;

height: 50px;

border-radius: 50%;

background-color: cyan;

}

#circle:hover {

width: 500px;

height: 500px;

left: 50px;

top: 50px;

}