css实现图片渐变切换效果

news2024/9/9 4:12:04

一、效果

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1918122.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！