CSS3制作产品展示器

怼烎@ 2022-06-16 10:19 199阅读 0赞

用css3实现的一款产品展示器，看着还挺有特点的，老规矩，先上图：  
![这里写图片描述][SouthEast]  
当我们点击右边信息时，左边图片内容也会相应的在左上角/右下角向右下角/左上角过渡延展开来；  
HTML代码：

<div id="main">
        
        <input type="radio" name="tab" id="tab1" class="tabs" checked="checked">
        <label for="tab1">
            <div class="bg1">
                <dl id="dl1">
                    <dt><img src="images/but1.png" width="40" /></dt>
                    <dd class="title">精心挑选，倾情推荐</dd>
                    <dd>推荐精品应用，享受多彩上网</dd>
                </dl>
            </div>
        </label>
        <input type="radio" name="tab" id="tab2" class="tabs">
        <label for="tab2">
            <div class="bg2">
                <dl id="dl2">
                    <dt><img src="images/but2.png" width="40" /></dt>
                    <dd class="title">精心挑选，倾情推荐</dd>
                    <dd>推荐精品应用，享受多彩上网</dd>
                </dl>
            </div>
        </label>
        <input type="radio" name="tab" id="tab3" class="tabs">
        <label for="tab3">
            <div class="bg3">
                <dl id="dl3">
                    <dt><img src="images/but3.png" width="40" /></dt>
                    <dd class="title">精心挑选，倾情推荐</dd>
                    <dd>推荐精品应用，享受多彩上网</dd>
                </dl>
            </div>
        </label>
        <input type="radio" name="tab" id="tab4" class="tabs">
        <label for="tab4">
            <div class="bg4">
                <dl id="dl4">
                    <dt><img src="images/but4.png" width="40" /></dt>
                    <dd class="title">精心挑选，倾情推荐</dd>
                    <dd>推荐精品应用，享受多彩上网</dd>
                </dl>
            </div>
        </label>
        
        <img src="images/1.png" class="tp" id="img1"/>
        <img src="images/2.png" class="tp" id="img2"/>
        <img src="images/3.png" class="tp" id="img3"/>
        <img src="images/4.png" class="tp" id="img4"/>
    </div>

CSS代码：

*{ margin: 0; padding: 0; }
    #main{ width: 948px; height: 260px; position: relative; border: 5px solid #000; margin: 30px auto; } 
    #main .tabs{ display: none; }
    #main input.tabs + label div{ height: 65px; width: 261px; position: absolute; background: #414141; filter: Alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; }
    input.tabs + label dl{ padding: 8px 15px; }
    input.tabs + label dl dt{ width:40px; height:48px; float:left; padding-right:15px; }
    input.tabs + label dl dd.title{ font-size:14px; color:#fff; }
    input.tabs + label dl dd{ font-family:"微软雅黑"; color:#E3E3E3; font-size:12px; line-height:20px; }
    /* 设置选中信息栏的背景颜色线性渐变 */
    input.tabs:checked + label  dl{ background: -webkit-gradient(linear, left top, right bottom, color-stop(0, rgba(0, 0, 0, .65)), color-stop(1, transparent));}
    /* 设置图片高度为0，不显示 */
    .tp{ height:0px; -webkit-transition:height 0.5s ease; display:block; }
    /* 相应的单选框选中则相对应图片按照高度过渡出现 */
    input#tab1:checked ~ #img1{ height:260px; }
    input#tab2:checked ~ #img2{ height:260px; }
    input#tab3:checked ~ #img3{ height:260px; }
    input#tab4:checked ~ #img4{ height:260px; }
    
    input.tabs + label .bg1{ right:0px; top:0px; }
    input.tabs + label .bg2{ right:0px; top:65px; }
    input.tabs + label .bg3{ right:0px; top:130px; }
    input.tabs + label .bg4{ right:0px; top:195px; }

[SouthEast]: /images/20220616/a5f861927a7948ed9c44ceb512e5d77b.png