css实现图片渐变切换效果

最新推荐文章于 2024-08-02 22:49:06 发布

追逐梦想永不停

最新推荐文章于 2024-08-02 22:49:06 发布

阅读量255

点赞数 3

文章标签： css 前端

本文链接：https://blog.csdn.net/BHSZZY/article/details/140346033

版权

一、效果

使用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;
    }
}