CSS3实现DIV右侧滑入效果

作者：System 时间：2024年08月27日分类：所有,css3 字数：669

这篇文章距离上次修改已过217天，其中的内容可能已经有所变动。

要使用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，以确保盒子在滑入时是可见的。

CSS3实现DIV右侧滑入效果

评论已关闭

推荐阅读