欢迎光临散文网 会员登陆 & 注册

看似简单的布局，却非常考验基本功，无缝滚动图片轮播CSS部分～

2023-02-20 13:14 作者:嘿大喵喵  | 我要投稿
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="UTF-8">  
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  8.     <title>Document</title>  
  9.     <style>  
  10.         * {  
  11.             margin: 0;  
  12.             padding: 0;  
  13.         }  
  14.   
  15.         :root {  
  16.             --iwidth: 960px;  
  17.             --iheight: 540px;  
  18.         }  
  19.   
  20.         body {  
  21.             background-color: #7f8c8d;  
  22.             width: 100vw;  
  23.             height: 100vh;  
  24.             display: flex;  
  25.             justify-content: center;  
  26.             align-items: center;  
  27.         }  
  28.   
  29.         #img {  
  30.             width: var(--iwidth);  
  31.             height: var(--iheight);  
  32.             box-shadow: 0 0 15px rgba(0, 0, 0, .7);  
  33.             border-radius: 10px;  
  34.             overflow: hidden;  
  35.         }  
  36.   
  37.         #main div {  
  38.             width: var(--iwidth);  
  39.             height: var(--iheight);  
  40.             border-radius: 10px;  
  41.             flex-shrink: 0;  
  42.             background-size: cover;  
  43.         }  
  44.   
  45.         #main {  
  46.             display: flex;  
  47.         }  
  48.   
  49.         #img1 {  
  50.             background-image: url(./img/lunbo1.png);  
  51.         }  
  52.   
  53.         #img2 {  
  54.             background-image: url(./img/lunbo2.png);  
  55.         }  
  56.   
  57.         #img3 {  
  58.             background-image: url(./img/lunbo3.png);  
  59.         }  
  60.   
  61.         #img4 {  
  62.             background-image: url(./img/lunbo4.png);  
  63.         }  
  64.   
  65.         #mask {  
  66.             width: var(--iwidth);  
  67.             height: var(--iheight);  
  68.             position: absolute;  
  69.             display: flex;  
  70.             justify-content: space-between;  
  71.         }  
  72.   
  73.         #mask div {  
  74.             width: 25%;  
  75.             height: 100%;  
  76.             z-index: 999;  
  77.             user-select: none;  
  78.             position: relative;  
  79.         }  
  80.   
  81.         .btn {  
  82.             display: block;  
  83.             width: 60px;  
  84.             height: 60px;  
  85.             border-radius: 10px;  
  86.             background-color: black;  
  87.             opacity: .5;  
  88.             box-shadow: 0 0 10px rgba(255, 255, 255.8);  
  89.             color: rgba(255, 255, 255, .8);  
  90.             font-size: 40px;  
  91.             text-align: center;  
  92.             position: absolute;  
  93.             top: 50%;  
  94.             /*水平方向移动：（遮罩宽度-按钮宽度）/2  */  
  95.             transform: translate(90px, -50%);  
  96.             display: none;  
  97.         }  
  98.   
  99.         #l_mask:hover .btn,  
  100.         #r_mask:hover .btn {  
  101.             display: block;  
  102.         }  
  103.   
  104.         .btn:hover {  
  105.             cursor: pointer;  
  106.             background: rgb(56, 17, 17, .7);  
  107.         }  
  108.     </style>  
  109. </head>  
  110.   
  111. <body>  
  112.     <div id="img">  
  113.         <div id="main">  
  114.             <div id="img1"></div>  
  115.             <div id="img2"></div>  
  116.             <div id="img3"></div>  
  117.             <div id="img4"></div>  
  118.         </div>  
  119.     </div>  
  120.     <div id="mask">  
  121.         <div id="l_mask">  
  122.             <span class="btn"><</span>  
  123.         </div>  
  124.         <div id="r_mask">  
  125.             <span class="btn">></span>  
  126.         </div>  
  127.     </div>  
  128. </body>  
  129. <script>  
  130.   
  131. </script>  
  132.   
  133. </html>  


标签：

看似简单的布局，却非常考验基本功，无缝滚动图片轮播CSS部分～的评论 (共 条)

分享到微博请遵守国家法律