css实现图片渐变切换效果
一、效果
使用css@keyframes，实现5个图片渐变切换的效果。如下图：
二、代码
1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="image-frame">
<div class="image01">1</div>
<div class="image02">2</div>
<div class="image03">3</div>
<div class="image04">4</div>
<div class="image05">5</div>
</div>
</body>
</html>
2.css
.image-frame{
position: relative;
width: 70%;
height: 300px;
overflow: hidden;
margin: 0 auto;
}
.image01,
.image02,
.image03,
.image04,
.image05
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.image01{
background-color: red;
display: flex;
align-items: center;
font-size: 50px;
animation: slide-animation-01 10s infinite;
}
.image02{
background-color: blue;
display: flex;
align-items: center;
font-size: 50px;
animation: slide-animation-02 10s infinite;
}
.image03{
background-color: yellow;
display: flex;
align-items: center;
font-size: 50px;
animation: slide-animation-03 10s infinite;
}
.image04{
background-color: green;
display: flex;
align-items: center;
font-size: 50px;
animation: slide-animation-04 10s infinite;
}
.image05{
background-color: purple;
display: flex;
align-items: center;
font-size: 50px;
animation: slide-animation-05 10s infinite;
}
@keyframes slide-animation-01{
0%{
opacity: 1;
}
10%{
opacity: 1;
}
20%{
opacity: 1;
}
30%{
opacity: 0;
}
40%{
opacity: 0;
}
50%{
opacity: 0;
}
60%{
opacity: 0;
}
70%{
opacity: 0;
}
80%{
opacity: 0;
}
90%{
opacity: 0;
}
100%{
opacity: 0;
}
}
@keyframes slide-animation-02{
0%{
opacity: 0;
}
10%{
opacity: 0;
}
20%{
opacity: 0;
}
30%{
opacity: 1;
}
40%{
opacity: 1;
}
50%{
opacity: 0;
}
60%{
opacity: 0;
}
70%{
opacity: 0;
}
80%{
opacity: 0;
}
90%{
opacity: 0;
}
100%{
opacity: 0;
}
}
@keyframes slide-animation-03{
0%{
opacity: 0;
}
10%{
opacity: 0;
}
20%{
opacity: 0;
}
30%{
opacity: 0;
}
40%{
opacity: 0;
}
50%{
opacity: 1;
}
60%{
opacity: 1;
}
70%{
opacity: 0;
}
80%{
opacity: 0;
}
90%{
opacity: 0;
}
100%{
opacity: 0;
}
}
@keyframes slide-animation-04{
0%{
opacity: 0;
}
10%{
opacity: 0;
}
20%{
opacity: 0;
}
30%{
opacity: 0;
}
40%{
opacity: 0;
}
50%{
opacity: 0;
}
60%{
opacity: 0;
}
70%{
opacity: 1;
}
80%{
opacity: 1;
}
90%{
opacity: 0;
}
100%{
opacity: 0;
}
}
@keyframes slide-animation-05{
0%{
opacity: 1;
}
10%{
opacity: 0;
}
20%{
opacity: 0;
}
30%{
opacity: 0;
}
40%{
opacity: 0;
}
50%{
opacity: 0;
}
60%{
opacity: 0;
}
70%{
opacity: 0;
}
80%{
opacity: 0;
}
90%{
opacity: 1;
}
100%{
opacity: 1;
}
}
原文地址：https://blog.csdn.net/BHSZZY/article/details/140346033
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！