我创建了这个动画,但它并不流畅.当您将鼠标悬停在蓝色圆圈上时,会打开一个彩色圆圈,但开口不稳定,不是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元素,其高度和宽度正在转换(第一个增加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;
}
