如何用动画延迟用CSS实现轮播（animation-delay与动画进程百分比)）

最新推荐文章于 2023-03-16 11:09:42 发布

NOyesNONO_

最新推荐文章于 2023-03-16 11:09:42 发布

阅读量433

点赞数 1

分类专栏：前端文章标签： html5 css3

本文链接：https://blog.csdn.net/NOyesNONO_/article/details/111385567

版权

前端专栏收录该内容

54 篇文章 2 订阅

订阅专栏

在这里插入图片描述

技术要领：
将需要轮播的图片img放在div中，再将这几个div放在一个外层div，图片大小以及这两个div的大小一致。
配合动画@keyframes 、颜色透明度的改变、每个父级div的延迟效果。
以下是源代码。


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: #95a5a6;
        }
        .container{
            width: 1226px;
            height: 460px;
            margin: 0 auto;
            margin-top: 200px;
            position: relative;
        }
        .container .slides-show{
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            animation: slidesShow 10s infinite;
        }
        .slides-show img{
            width: 1226px;
            height: 460px;
        }
        @keyframes slidesShow{
            20%{
                opacity: 1;
            }
            40%{
                opacity: 0;
            }
            100%{
                opacity: 0;
            }
        }
        .slides-show:nth-child(2){
            animation-delay: 2s;
        }
        .slides-show:nth-child(3){
            animation-delay: 4s;
        }
        .slides-show:nth-child(4){
            animation-delay: 6s;
        }
        .slides-show:nth-child(5){
            animation-delay: 8s;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="slides-show"><img src="img/bc1.webp" alt=""></div>
        <div class="slides-show"><img src="img/bc2.webp" alt=""></div>
        <div class="slides-show"><img src="img/bc3.webp" alt=""></div>
        <div class="slides-show"><img src="img/bc4.jpg" alt=""></div>
        <div class="slides-show"><img src="img/bc5.webp" alt=""></div>
    </div>
</body>

</html>

NOyesNONO_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
如何用动画延迟用CSS实现轮播（animation-delay与动画进程百分比)）

技术要领：将需要轮播的图片img放在div中，再将这几个div放在一个外层div，图片大小以及这两个div的大小一致。配合动画@keyframes 、颜色透明度的改变、每个父级div的延迟效果。以下是源代码。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wid.
复制链接

扫一扫