CSS3实现DIV右侧滑入效果
要使用CSS3实现一个DIV从右侧滑入的效果，可以使用transition属性来平滑过渡，并使用transform属性配合:hover伪类来实现。以下是一个简单的例子：
HTML:
<div class="slider">
我是从右侧滑入的盒子
</div>CSS:
.slider {
width: 200px;
height: 100px;
background-color: skyblue;
transition: transform 0.5s ease-in-out;
transform: translateX(100%); /* 初始状态，在视窗右侧 */
opacity: 0; /* 初始透明度为0 */
}
.slider:hover {
transform: translateX(0); /* 鼠标悬停时，滑入 */
opacity: 1; /* 鼠标悬停时透明度为1 */
}在这个例子中，.slider类定义了盒子的初始样式，transition属性设置了过渡效果，transform属性设置了初始状态下盒子在视窗中的位置（translateX(100%)意味着盒子在视窗的右侧）。
:hover伪类在鼠标悬停时改变transform属性，使盒子滑入视窗。opacity属性也在悬停时改变为1，以确保盒子在滑入时是可见的。
评论已关闭