zoukankan      html  css  js  c++  java
  • HTML+css图片轮播

    <div class="pst">
    <div class="pin">
    <div style="background-image:url(https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/qq_logo_2x.png)"><p>111</p></div>
    <div style="background-image:url(https://www.baidu.com/img/flexible/logo/pc/result.png)"><p>222</p></div>
    <div style="background-image:url(https://p.ssl.qhimg.com/t010e288a56a0b005e9.png)"><p>333</p></div>
    <div style="background-image:url(https://static.ws.126.net/163/f2e/www/index20170701/images/sprite_img20191120.png)"><p>4444</p></div>
    </div>
    </div>

    <style>
    .pst {
    200px; /*焦点图区域宽*/
    height:150px; /*焦点图区域高*/
    overflow:hidden; /*焦点图区域类似遮罩层,超出部分不显示*/
    position:relative; /*相对定位于内胆*/
    }
    .pin {
    800px; /*内胆宽4x200px*/
    height:150px; /*内胆高同区域高*/
    position:absolute; /*绝对定位*/
    animation:jiaodian 20s infinite; /*设置动画为:jiaodian 播放时间20s infinite循环播放*/
    }
    .pin div {
    float:left; /*图片浮动起来*/
    200px; /*图片宽度同区域宽*/
    height:150px; /*图片高度同区域高*/
    background-size:100% 100%; /*背景拉伸*/
    }
    .pin p {
    background:black;
    margin:0;
    color:#fff;
    bottom:0;
    position:absolute;
    100%;
    opacity:0.72;
    }
    @keyframes jiaodian { /*定义动画帧jiaodian,4张图,分四个阶段,每个阶段25%,其中20%静止,5%过度动画*/
    0%{left:0px;}
    20%{left:0px;}
    25%{left:-200px;}
    45%{left:-200px;}
    50%{left:-400px;}
    70%{left:-400px;}
    75%{left:-600px;}
    95%{left:-600px;}
    100%{left:0px;}
    }
    </style>

  • 相关阅读:
    平台架构设计及市场分析
    编写jQuery插件
    分布式锁
    初探12306售票算法(一)- 理论(转)
    年后跳槽如何准备?(转)
    therefore/so/hence/then/accordingly/Thus
    ignore,neglect,omit,overlook
    OOA/OOD/OOP(转)
    SQL Server里的 ISNULL 与 NULLIF
    稀疏矩阵
  • 原文地址:https://www.cnblogs.com/ince/p/13790135.html
Copyright © 2011-2022 走看看