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
  • 相关阅读:
    我是如何用三小时搞出个赚钱产品的?
    搭建一个基于nuxt.js的项目
    栅格系统
    git使用
    通过JS获取屏幕高度,借助屏幕高度设置div的高度
    如何理解盒模型
    e.target.value 和 this 的区别
    组件化设计:弹窗的使用逻辑
    uni-app 入坑记
    MAC 系统快捷键
  • 原文地址:https://www.cnblogs.com/MissBean/p/animation.html
Copyright © 2011-2022 走看看