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
  • 相关阅读:
    跨数据库查询——dblink
    进度条
    datagrid 的标题的内容不对应整齐
    ie9table排列不对.td错行,多了一列
    进位方法
    ie9 jscript7 内存不足 页面无响应
    a标签 href触发及传值
    uploadify上传附件 点击保存无效 切F12就可以正常保存
    oracle增加用户密码,cmd导入数据库
    ${}中嵌套${}
  • 原文地址:https://www.cnblogs.com/MissBean/p/animation.html
Copyright © 2011-2022 走看看