HTML – 如何平滑宽度和高度的过渡？

概述我创建了这个动画,但它并不流畅.当您将鼠标悬停在蓝色圆圈上时,会打开一个彩色圆圈,但开口不稳定,不是100％平滑.动画可以平滑,怎么样？ #container { border: 1px solid black; width: 600px; height: 600px; position: relative;}#circle { margin: 0; padding: 我创建了这个动画,但它并不流畅.当您将鼠标悬停在蓝色圆圈上时,会打开一个彩色圆圈,但开口不稳定,不是100％平滑.动画可以平滑,怎么样？

#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: 50%;  left: 50%;  transform: translate(-50%,-50%);  overflow: hIDden;  Transition: wIDth 0.2s,height 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;}

<div ID="container">  <div ID="circle">    <div ID="hIDe"></div>    <a ID="trap1"></a>    <a ID="trap2"></a>    <a ID="trap3"></a>    <a ID="trap4"></a>    <a ID="trap5"></a>    <a ID="trap6"></a>  </div></div>

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

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

当高度和宽度转换时,元素的更新似乎逐个像素地发生.例如,在下面的片段中有两个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;}

<div></div><div></div>

现在你会问我这与震动有什么联系.连接是高度和宽度逐像素增加但转换(-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;}

<div ID="container">  <div ID="circle">    <div ID="hIDe"></div>    <a ID="trap1"></a>    <a ID="trap2"></a>    <a ID="trap3"></a>    <a ID="trap4"></a>    <a ID="trap5"></a>    <a ID="trap6"></a>  </div></div>

总结

以上是内存溢出为你收集整理的HTML – 如何平滑宽度和高度的过渡？全部内容，希望文章能够帮你解决HTML – 如何平滑宽度和高度的过渡？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。