欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

使用CSS实现一个简单的幻灯片效果

程序员文章站 2022-04-07 08:55:12
...
方法一: 简单的CSS代码实现幻灯片效果

方法二: 使用CSS3 Animation来制作幻灯片

方法一: 简单的CSS代码实现幻灯片效果

话不多说,直接上代码

DOCTYPE html>
html lang="zh-CN">
head>
    meta charset="UTF-8">
    title>CSS实现简单的幻灯片效果title>
    style type="text/css">
        img {
            display: none;
            width: 600px;
            height: 600px;
        }

        input:checked + img {
            display: block;
        }

        input {
            position: absolute;
            left: -9999px;
        }

        label {
            cursor: pointer;
        }

    style>
head>
body>
    div id="cont">
        input id="img1" type="radio" checked="checked" name="img"  />
        img src="img1.jpg" />
        input id="img2" type="radio" name="img">
        img src="img2.jpg" />
    div>
    div id="nav">
        label for="img1">第一张label>
        label for="img2">第二张label>
    div>
    
    


    
body>
html>

大家看看,有不足的地方还请指正。

源地址:http://zhidao.baidu.com/question/808066722818527652.html

方法二: 使用CSS3 Animation来制作幻灯片

DOCTYPE html>
html lang="zh-CN">
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属性,里面的值的设置s可以去网上查*/
            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.jpg) no-repeat;
            }

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

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

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