zoukankan      html  css  js  c++  java
  • CSS3实现简单的幻灯片

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    <meta charset="UTF-8">
    <title>css3 幻灯片</title>
    <style type="text/css">
    .ani {
    width: 480px;
    height: 320px;
    margin: 50px auto;
    overflow: hidden;
    box-shadow: 0 0 5px rgba(0, 0, 0, 1);
    background-size: cover;
    background-position: center;
    -webkit-animation-name: "loops";
    -webkit-animation-duration:20s;
    -webkit-animation-iteration-count: infinite;
    }
    
    @-webkit-keyframes "loops" {
    0% {
    background: url('img/1.jpg') no-repeat;
    }
    25% {
    background: url('img/2.jpg') no-repeat;
    }
    50% {
    background: url('img/3.jpg') no-repeat;
    }
    75% {
    background: url('img/4.jpg') no-repeat;
    }
    100% {
    background: url('img/5.jpg') no-repeat;
    }
    }
    </style>
    </head>
    
    <body>
    <div class="ani">
    </div>
    </body>
    
    </html>
  • 相关阅读:
    记录操作日志
    sql优化【转】
    JS事件
    MFC电子词典
    控制台电子词典---链表
    控制台电子词典
    贪吃蛇
    十六进制转化
    进程线程
    面试体复习
  • 原文地址:https://www.cnblogs.com/Iona/p/4718140.html
Copyright © 2011-2022 走看看