css3 向上滑动效果 |css3动画怎么播放中暂停

/*以下是CSS代码*/
.container {
position: relative;
width: 500px;
height: 500px;
}
.slide1,
.slide2,
.slide3 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
}
.slide1 {
background-color: #3aa4c4;
}
.slide2 {
background-color: #72bf44;
}
.slide3 {
background-color: #efb21e;
}
.container:hover .slide1 {
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
.container:hover .slide1 + .slide2 {
opacity: 1;
transition: opacity 0.5s ease-in-out 0.5s;
}
.container:hover .slide1 + .slide2 + .slide3 {
opacity: 1;
transition: opacity 0.5s ease-in-out 1s;
}

以上示例代码是将三个绝对定位的div元素叠放在一起，并用CSS3实现了向上滑动的效果。其中.slide1表示最下面的div，其他的div分别是.slide2和.slide3。当使用鼠标悬停在.container元素上时，会通过CSS的过渡效果，让它们逐渐向上滑动并展示出来的。这种效果不仅可以用于网页的首页，也可以应用于其他的页面上。