zoukankan      html  css  js  c++  java
  • 纯css3代码写无缝滚动效果

    主要用到css3中的动画 @keyframes, animation。

    布局是外层一个div宽固定,然后overflow hidden 绝对定位,里面的ul 固定定位。通过对ul添加动画来实现效果。具体代码如下

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4   <meta charset="UTF-8">
     5   <title>Document</title>
     6 </head>
     7 <style type="text/css">
     8   *{margin: 0;padding: 0;}
     9   ul li{list-style: none;}
    10   .banner{width: 100%;height: 568px;overflow: hidden;position: relative;}
    11   .banner ul{
    12     width: 500%;
    13     position: absolute;
    14     left: 0;
    15     top: 0;
    16     height: 568px;
    17     -webkit-animation:slide 10s linear infinite;
    18   }
    19   .banner ul li{
    20     float: left;
    21     width: 20%;
    22     height: 568px;
    23   }
    24   .banner ul li:nth-child(1){background:url(img/1.jpg) center; }
    25   .banner ul li:nth-child(2){background:url(img/2.jpg) center; }
    26   .banner ul li:nth-child(3){background:url(img/3.jpg) center; }
    27   .banner ul li:nth-child(4){background:url(img/4.jpg) center; }
    28   .banner ul li:nth-child(5){background:url(img/5.jpg) center; }
    29   @-webkit-keyframes slide{
    30     0%{left: 0;}
    31     20%{left: 0;}
    32     21%{left: -100%;}
    33     40%{left: -100%;}
    34     41%{left: -200%;}
    35     60%{left: -200%;}
    36     61%{left: -300%;}
    37     80%{left: -300%;}
    38     81%{left: -400%;}
    39     100%{left: -400%;}
    40   }
    41   .banner:hover ul{-webkit-animation-play-state:paused;}
    42 </style>
    43 <body>
    44   <div class="banner">
    45     <ul>
    46       <li></li>
    47       <li></li>
    48       <li></li>
    49       <li></li>
    50       <li></li>
    51     </ul>
    52   </div>
    53 </body>
    54 </html>
    View Code
  • 相关阅读:
    Struts2快速后台验证 使用
    Python发送邮件
    【Python】【Flask】前端调用后端方法
    后台参数验证的几种方式
    使用 jQuery 进行前端验证
    postman接口测试——笔记
    安全测试
    jQuery 是javascript的一个库(常用插件、处理器)
    javascript 的 事件类型(事件)
    JavaScript的 基本数据类型---对象
  • 原文地址:https://www.cnblogs.com/MissBean/p/animation.html
Copyright © 2011-2022 走看看