CSS3之动画模块实现轮播图

最新推荐文章于 2024-04-15 10:28:24 发布

weixin_30896763

最新推荐文章于 2024-04-15 10:28:24 发布

阅读量206

点赞数

原文链接：http://www.cnblogs.com/xiaonanxia/p/10669055.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>无限轮播图</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      width: 600px;
      height: 188px;
      border: 1px solid #000;
      margin: 100px auto;
      overflow: hidden;

    }
    ul{
      width: 2000px;
      height: 188px;
      background-color: black;
      animation: move 10s linear 0s infinite normal;
    }
    ul li{
      float: left;
      list-style: none;
      width: 300px;
      height: 188px;
      background-color: red;
      border: 1px solid #000;
      box-sizing: border-box;

    }

    ul:hover{
      /*动画添加给谁, 就让谁停止*/
      animation-play-state: paused;
    }
    /*
     半透明，为了显示蒙版
     */

    ul:hover li{
      opacity: 0.5;
    }
    ul li:hover{
      opacity: 1;
    }

    ul li img {
      width: 300px;
      height: 188px;
    }
    @keyframes move {
      from {
        margin-left: 0;
      }
      to {
        margin-left: -1200px;
      }
    }
  </style>
</head>
<body>
<div>
  <ul>
    <li><img src="images/banner11.png" alt=""></li>
    <li><img src="images/banner11.png" alt=""></li>
    <li><img src="images/banner11.png" alt=""></li>
    <li><img src="images/banner11.png" alt=""></li>
    <!--这里添加两个，作为平滑的过渡-->
    <li><img src="images/banner11.png" alt=""></li>
    <li><img src="images/banner11.png" alt=""></li>
  </ul>
</div>

</body>
</html>

转载于:https://www.cnblogs.com/xiaonanxia/p/10669055.html

weixin_30896763

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3之动画模块实现轮播图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>无限轮播图</title> <style> *{ margin: 0; padding: 0; }...
复制链接

扫一扫