一个让图片轮流播放的练习

最新推荐文章于 2022-11-29 20:30:00 发布

日益努力

最新推荐文章于 2022-11-29 20:30:00 发布

阅读量628

点赞数 1

分类专栏：笔记文章标签： html css

本文链接：https://blog.csdn.net/weixin_44192217/article/details/104138260

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    * {
          padding: 0;
          margin: 0;
          text-decoration: none;
          list-style: none;
      }  
      body {
        perspective: 1000px;
      }
     .nav {
     height: 150px;
     width: 750px;             /* 设置一个循环的图片播放框 */
     border: 1px solid red;
     margin: 0 auto;
     overflow: hidden;
     }
     ul {
       width: 200%;
        /* 因为ul包括里面所有的图片,拉长自己整体的容量图片宽度,和父级框没关系*/
       animation: go 3s linear infinite;  
     }
     ul li{
      float:left;
     }
   img {
     height:100%;
     width: 150px;
   }
   @keyframes go {
     from {
       transform: translateX(0);
     }
     to {
      transform: translateX(-750px);
     } 
   }
   .nav:hover ul {
     animation-play-state:paused ;  
     /*鼠标经过暂停动画*/
   }
    </style>
</head>
<body>
  <div class="nav">
    <ul>
      <li><img src="222.png"></li>
      <li><img src="pop.jpg"></li>
      <li><img src="pop0.jpg"></li>
      <li><img src="222.png"></li>
      <li><img src="pop.jpg"></li>
      <li><img src="pop0.jpg"></li>
      <li><img src="222.png"></li>
      <li><img src="pop.jpg"></li>
      <li><img src="pop0.jpg"></li>
      <li><img src="222.png"></li>
    </ul>
  </div>
</body>
</html>

效果如下
在这里插入图片描述

日益努力

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
一个让图片轮流播放的练习

代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...
复制链接

扫一扫