前台电话图片滑动的全部代码-优快云博客

本文展示了一个使用HTML和CSS实现的轮播图效果，通过动画和网格布局展示了多个图片的无缝滚动。同时，页面中包含固定位置的文字显示区域，用于突出显示关键信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>前台</title>
  
 
      
      <style>
        
.slideshow-text {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 100;
  font-size: 80px;
  width: 100vw;
  text-align: center;
  color: #fff;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 100;
  pointer-events: none;
  text-transform: uppercase;
  letter-spacing: 20px;
  line-height: 0.8;
}
      </style>
      <style>
        *{padding: 0;
          margin: 0;}
          body{
            
              background-color: #34495e;
              display: grid;
              
          }
          .div{
              width: 1000px;
              height: 700px;
              z-index: 0;
          }
          .div img{width:100%;height:100%;}
          main{
              width: 100%;
              height: 100%;   
              justify-self: center;
              align-self: center;
              overflow: hidden;
          }
        section{/*关键语句 section设置*/
            width: 3000px;
            height: 100%;
            display: grid;
            grid-template-columns: 700px 700px 700px  700px;
            grid-template-rows: 700px ;

            animation-name: hd;/*关键语句 动画设置*/
            animation-duration: 14s;
            animation-iteration-count: infinite;
        }
        
        .div{
            overflow: hidden;/*隐藏溢出*/
        }
 


        @keyframes hd{/*关键语句 动画关键帧*/
              
              to{ transform :translateX(-1200px);}
              }
     
    </style>
  
</head>

<body>
  <main>
    <section>
        <div class="div"><img src="http://browser9.qhimg.com/bdr/__85/t013b21a10a6929ccbc.jpg" alt=""></div>
        <div class="div"><img src="https://pic1.zhimg.com/v2-f2030f6906c07aec3b5933ee3a5c2659_r.jpg" alt=""></div>
        <div class="div"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594436630711&di=02e8224de5d6087c251f0a17c713fbf3&imgtype=0&src=http%3A%2F%2Fimg1.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp91929168.jpg" alt=""></div>
        <div class="div"><img src="https://pic1.zhimg.com/80/41663ecd82ccc7e8cc1a1d2fb9b61f9c_720w.jpg" alt=""></div>
        
        
     </section>
 </main>

  <div class="slideshow-text">
    <div class="item">TEL：654530475</div>
    <div class="item">玩具吧</div>
    <div class="item">水吧</div>
    <div class="item">书吧</div>
  </div>
</div>









  


</body>
</html>