1、效果演示
2、完整代码
<!DOCTYPE html>
<html>
<head>
<style>
html {
background-color: white;
100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.frame {
500px;
min- 500px;
height: 300px;
min-height: 300px;
border: 5px solid whitesmoke;
box-shadow: 1px 1px 5px gray;
position: relative;
overflow: hidden;
}
.slide {
position: absolute;
top: 0;
left: 0;
opacity: 0;
100%;
height: 100%;
}
.slide-animation-1 {
animation: switch-slide-1 10s ease-in-out infinite;
}
.slide-animation-2 {
animation: switch-slide-2 10s ease-in-out infinite;
}
.slide-animation-3 {
animation: switch-slide-3 10s ease-in-out infinite;
}
.slide-animation-4 {
animation: switch-slide-4 10s ease-in-out infinite;
}
@keyframes switch-slide-1 {
0% { opacity: 1; left: 0px; }
/* 展示 */
20% { opacity: 1; left: 0px; }
/* 切出 */
25% { opacity: 0; left: 500px; }
/* 归位 */
26% { opacity: 0; left: -500px; }
/* 等待 */
95% { opacity: 0; left: -500px; }
/* 切入 */
100% { opacity: 1; left: 0px; }
}
@keyframes switch-slide-2 {
0% { opacity: 0; left: -500px; }
/* 等待 */
20% { opacity: 0; left: -500px; }
/* 切入 */
25% { opacity: 1; left: 0px; }
/* 展示 */
45% { opacity: 1; left: 0px; }
/* 切出 */
50% { opacity: 0; left: 500px; }
/* 归位 */
51% { opacity: 0; left: -500px; }
/* 等待 */
100% { opacity: 0; left: -500px; }
}
@keyframes switch-slide-3 {
0% { opacity: 0; left: -500px; }
/* 等待 */
45% { opacity: 0; left: -500px; }
/* 切入 */
50% { opacity: 1; left: 0px; }
/* 展示 */
70% { opacity: 1; left: 0px; }
/* 切出 */
75% { opacity: 0; left: 500px; }
/* 归位 */
76% { opacity: 0; left: -500px; }
/* 等待 */
100% { opacity: 0; left: -500px; }
}
@keyframes switch-slide-4 {
0% { opacity: 0; left: -500px; }
/* 等待 */
70% { opacity: 0; left: -500px; }
/* 切入 */
75% { opacity: 1; left: 0px; }
/* 展示 */
95% { opacity: 1; left: 0px; }
/* 切出 */
100% { opacity: 0; left: 500px; }
}
</style>
</head>
<body>
<div class="frame">
<img class="slide slide-animation-1" src="https://cdn.pixabay.com/photo/2014/12/14/12/26/evening-567840__340.jpg" alt="">
<img class="slide slide-animation-2" src="https://cdn.pixabay.com/photo/2012/03/01/00/21/bridge-19513__340.jpg" alt="">
<img class="slide slide-animation-3" src="https://cdn.pixabay.com/photo/2017/03/29/15/18/tianjin-2185510__340.jpg" alt="">
<img class="slide slide-animation-4" src="https://cdn.pixabay.com/photo/2016/05/05/02/37/sunset-1373171__340.jpg" alt="">
</div>
</body>
</html>
【 阅读更多 CSS 系列文章，请看 CSS学习笔记 】