CSS实现图片轮播

妖狐艹你老母 2022-12-17 11:57 326阅读 0赞

利用html+css+css3实现简单的图片轮播

在这里插入图片描述
css部分

  1. #sc{ 
  2.       width: 9999px;
  3.       height: 9999px;
  4.       animation: 10s ss infinite;
  5.     }
  6. #sc img{ 
  7.       float: left;
  8.     }
  9. #tv{ 
  10.     width: 730px;
  11.     height: 454px;
  12.     overflow: hidden; 
  13. }
  14. @keyframes ss{ 
  15.     0%{ }
  16.     25%{ transform: translateX(0px)}
  17.     35%{ transform: translateX(-730px)}
  18.     50%{ transform: translateX(-730px)}
  19.     65%{ transform: translateX(-1460px)}
  20.     75%{ transform: translateX(-1460px)}
  21.     85%{ transform: translateX(-2190px)}
  22.     100%{ transform: translateX(-2190px)}
  23. }

html部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <link rel="stylesheet" href="css/css.css"> 
  8. </head>
  9. <body>
  10.     <div id="tv">
  11.         <div id="sc">
  12.             <img src="img/01.png" height="454" width="730">
  13.             <img src="img/02.png" height="454" width="730">
  14.             <img src="img/3.png" height="454" width="730">
  15.             <img src="img/4.png" height="454" width="730">
  16.         </div>  
  17.     </div>
  18. </body>
  19. </html>

发表评论

表情：
评论列表 （有 0 条评论，326人围观）

还没有评论，来说两句吧...

相关阅读

    相关 HTML+CSS+JQ实现图片轮播效果

    焦点图广泛运用于主页的醒目位置放置广告，简单好用，加上效果也很好看。 实现的效果： 5张图片每两秒轮播一次，右下角的数字随图片而变换，鼠标放在数字上图片停止，移走

    灰太狼灰太狼/ 0 赞/ 336 阅读

    相关 CSS实现图片轮播

    CSS3有个别特性,可以触发硬件GPU来加速渲染,而不是调用默认浏览器引擎渲染; 但是很多属性,默认都是不开启硬件加速的;需要触发条件,一个最简单的触发条件就是使用3D属性(

    布满荆棘的人生布满荆棘的人生/ 0 赞/ 350 阅读