zoukankan      html  css  js  c++  java
  • 纯CSS3轮播图

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>纯CSS3轮播图</title>
    <style>
    html,body{
    100%;
    height: 100%;
    margin: 0;
    padding: 0;
    }
    div{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-size: cover;
    opacity: 0;
    animation: show 20s ease-out infinite;
    }
    @keyframes show{
    0%{
    opacity:0;
    z-index:2;
    }
    5%{
    opacity:1;
    z-index: 1;
    }
    20%{
    opacity:1;
    z-index:1;
    }
    25%{
    opacity:0;
    z-index:0;
    }
    100%{
    opacity:0;
    z-index:0;
    }
    }
    div:nth-child(1){
    background-image: url(1.jpg);
    animation-delay: -1s;
    }
    div:nth-child(2){
    background-image: url(2.jpg);
    animation-delay: 3s;
    }
    div:nth-child(3){
    background-image: url(3.jpg);
    animation-delay: 7s;
    }
    div:nth-child(4){
    background-image: url(4.jpg);
    animation-delay: 11s;
    }
    div:nth-child(5){
    background-image: url(5.jpg);
    animation-delay: 15s;
    }
    </style>
    </head>
    <body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </body>
    </html>

  • 相关阅读:
    Java的Set集合中的retainAll()方法
    蒲丰投针问题
    根据贝叶斯公式求解三门问题
    概率论公式(续)
    数字(number)
    寻找最美的你(select)
    木棍
    lowbit
    搜索题
    day7
  • 原文地址:https://www.cnblogs.com/huangmin1992/p/7171251.html
Copyright © 2011-2022 走看看