我有一个绝对定位的div,我希望在悬停时逐渐增大其大小(5s过渡),以使其成为相对定位的div的“边界”:
<div class="rectangle">
<div class="background"></div>
<div class="content">blah</div>
</div>
样式(为了便于阅读,删除了供应商前缀:]
.rectangle {
position: relative;
}
.background {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.content {
height: 800px;
width: 200px;
}
转换整个.background大小会导致波动的动画但边框是均匀的:
.rectangle:hover .background {
width: calc(100% + 40px);
height: calc(100% + 40px);
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
transition: 5s linear all;
}
过渡边界是波动的动画,但(显然)是均匀的边界
.rectangle:hover .content {
border: 20px solid red;
transition: 5s linear all;
}
转换变换比例为平滑,但由于是矩形,因此顶部和底部的“边界”变大:
.rectangle:hover .background {
transition: 5s transform;
transform: scale(1.1);
}
是否有任何方法来获得变换比例以保持尺寸均匀,或以其他任何方式创建此效果?
您可以尝试使用框阴影作为边框来实现平滑的过渡。
.rectangle {
position: relative;
width: 300px;
height: 300px;
top: 100px;
left: 30%;
}
.background {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: blue;
}
.background::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
box-shadow: 0 0 0 0px #000;
transition: 5s linear box-shadow;
}
.content {
height: 800px;
width: 200px;
}
.rectangle:hover .background::before {
box-shadow: 0 0 0 20px #000;
transition: 5s linear box-shadow;
}
<div class="rectangle">
<div class="background"></div>
<div class="content">blah</div>
</div>