写一个css幻灯片

最新推荐文章于 2023-09-28 10:59:22 发布

真的137

最新推荐文章于 2023-09-28 10:59:22 发布

阅读量375

点赞数

转载：https://blog.csdn.net/hope_It/article/details/82861754
方法1:使用label

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>纯css实现幻灯效果</title>
    <style>
        .container{
            position: relative;
        }
        img {
            display: none;
            width: 100px;
            height: 100px;
        }
        input:checked + img {
            display: block;
        }
        input {
            position: absolute;
            left: -9999px;
        }
        label {
            cursor: pointer;
        }
  </style>
</head>

<body>
    <div class="container">
        <input id="img1" name="img" type="radio" checked="checked">
        <img src="./img2.jpeg">
        <input id="img2" name="img" type="radio">
        <img src="./img1.jpeg">
    </div>
    <div class="link">
        <label for="img1">第一张</label>
        <label for="img2">第二张</label>
    </div>
</body>

</html>

方法二：使用css动画

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css3 实现幻灯片效果</title>
    <style type="text/css">
        .huanDengPic {
            width: 600px;
            height: 600px;
            margin: 50px auto 0;
            overflow: hidden;
            box-shadow:  0 0 5px rgba(0,0,0,1);   /*CSS3 box-shadow属性*/
            background-size: cover; 
            background-position: center;
            -webkit-animation-name: "loops"; /*检索或设置对象所应用的动画名称*/
            -webkit-animation-duration: 10s; /*检索或设置对象动画的持续时间*/
            -webkit-animation-iteration-count: infinite;  /*检索或设置对象动画的循环次数，此处的"infinite"为无限循环的意思*/
        }

        @-webkit-keyframes "loops" {  /*动画名称和上面设置的动画名称一样*/
            0% {
                background: url(./img1.jpeg) no-repeat;
            }

            50% {
                background: url(./img2.jpeg) no-repeat;
            }

            100% {
                background: url(./img3.jpg) no-repeat;
            }
        }

    </style>
</head>
<body>
    <div class="huanDengPic"></div>
</body>
</html>