可以通过CSS的transition属性和transform属性来实现。具体步骤如下:
下面是一个示例代码:
HTML代码:
<div class="start">
<p>起始点</p>
</div>
<div class="end">
<p>终点</p>
</div>
CSS代码:
.start {
width: 200px;
height: 200px;
background-color: #ccc;
position: relative;
}
.end {
width: 200px;
height: 200px;
background-color: #ccc;
position: absolute;
top: 0;
left: 100%;
transition: transform 0.5s ease-in-out;
}
.start:hover + .end {
transform: translateX(-100%);
}
在上述示例中,当鼠标悬停在起始点DIV上时,终点DIV会向左滑动100%的宽度,实现滑动过渡效果。
推荐的腾讯云相关产品:腾讯云CDN(内容分发网络),详情请参考:https://cloud.tencent.com/product/cdn
领取专属 10元无门槛券
手把手带您无忧上云