css实现竖状banner图

css实现竖状banner图

效果图

源码

• html代码块

<div class="wrap">
        <input type="radio" id="i1" name="a" checked>
        <label for="i1"></label>
        <input type="radio" id="i2" name="a">
        <label for="i2"></label>
        <input type="radio" id="i3" name="a">
        <label for="i3"></label>
        <input type="radio" id="i4" name="a">
        <label for="i4"></label>
        <div class="box">
            <img src="img/0.webp" alt="">
            <img src="img/1.webp" alt="">
            <img src="img/2.webp" alt="">
            <img src="img/4.jpg" alt="">
        </div>
       
    </div>

<style>
        .wrap{
            width: 590px;
            height: 470px;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
            margin-top: 100px;
        }
        .box{
            height: 1880px;
            font-size: 0;
            position: absolute;
            top: 0;
            transition: 0.5s;
        }
        input{
            position: absolute;
            top: 0;
            display: none;
        }
        label{
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 100%;
            box-sizing: border-box;
            border: 2px solid rgba(0, 0, 0, 0.4);
            background-color: rgba(255, 255, 255, 0.7);
            position: absolute;
            bottom: 30px;
            z-index: 2;
            cursor: pointer;
        }
        label:nth-child(2){
            right: 300px;
        }
        label:nth-child(4){
            right: 260px;
        }
        label:nth-child(6){
            right: 220px;
        }
        label:nth-child(8){
            right: 180px;
        }
         #i1:checked ~ .box{
            transform: translateY(0);
        }
        #i2:checked ~ .box{
            transform: translateY(-25%);
        }
        #i3:checked ~ .box{
            transform: translateY(-50%);
        }
        #i4:checked ~ .box{
            transform: translateY(-75%);
        }
        input:checked + label{
            background-color: red;
        }
    </style>

事项

• transform:translateY()； transform允许将元素移动（translate）、缩放（scale）、旋转（rotate）等。
  1.translate(x,y) 定义 2D 转换。
  2.translate3d(x,y,z) 定义 3D 转换。
  3.translateX(x) 定义转换，只是用 X 轴的值。
  4.translateY(y) 定义转换，只是用 Y 轴的值。
  5.translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
• input：radio 属性值——单选框
  radio包含有name、value、checked等属性，要实现单选功能，必须要使得众多radio单选框在同一个group（组）中，也就是radio的name属性值必须相同，必须保证在同一组才可以实现单选功能，这是前提！
• label标签——标签为 input 元素定义标注（标记）。（可以让input处于获取焦点或选中状）
  label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控 件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
  标签的 for 属性应当与相关元素的 id 属性相同。
• checked 选择器
  选取所有选中的复选框或单选按钮
• 结构伪类选择器
  first-child 选中第一个孩子
  last-child 选中最后一个孩子
  nth-child(n) n代表数字，选中第n个孩子
  nth-child(2n+1) 选中奇数个;li:nth-child(odd)
  nth-child(2n) 选中偶数个;li:nth-child(even)
  注：结构伪类选择器很容易遭到误解，需要特别强调。如，p:first-child表示选择父元素下的第一个子元素 p，而不是选择 p 元素的第一个子元素。
  目标伪类选择器