zoukankan      html  css  js  c++  java
  • css3 手风琴

    最近入手了大漠的《图解css3》所以会寻找一些案例来尝试,顺便和大家交流学习

    今天和大家分享的css3实现手风琴效果也是从大漠老师那里学来的

    ============================分割线======================================

    首先看一下布局结构

    <div class="accordionMenu">        
            <ul>
                <li>
                    <h2>Brand</h2>
                <p>Lorem ipsum dolor sit amet...</p>
                </li>
                <li>
                    <h2>Brand</h2>
                <p>Lorem ipsum dolor sit amet...</p>
                </li>
                <li>
                    <h2>Brand</h2>
                <p>Lorem ipsum dolor sit amet...</p>
                </li>
                <li>
                    <h2>Brand</h2>
                <p>Lorem ipsum dolor sit amet...</p>
                </li>
            </ul>
            
        </div>

    接下来给结构添加一些样式,这里实现手风琴效果的关键是控制li的高度以及overflow:hidden来达到手风琴的“展开,收起”效果

    .accordionMenu{
            position: relative;
             400px;
            margin: 0 auto;
    
        }
        .accordionMenu ul{
             100%;
            list-style:none;
        }
        .accordionMenu ul li{
            position: relative;
            display: block;
            height: 40px;
            overflow: hidden;
            margin: 0px;
            padding: 0;
            transition: height .3s ease-in-out;
            -webkit-transition:  height .3s ease-in-out;
        }
        .accordionMenu li h2{
            height:18px;
            line-height:18px;
            font-size: .6em;
            border:1px solid #eee;
            padding:10px;
            margin: 0;
            background: #f00;
    
        }
        .accordionMenu h2:before{
            border:5px solid #fff;
            content:"";
            border-color:#fff transparent transparent;
             0;
            height: 0;
            position:absolute;
            top:15px;
            right:15px;
        }

    image

    从样式可以看出在.accordionMenu ul li中添加了动画效果以实现平缓过渡效果

    .accordionMenu ul li{
            position: relative;
            display: block;
            height: 40px;
            overflow: hidden;
            margin: 0px;
            padding: 0;
            transition: height .3s ease-in-out;
            -webkit-transition:  height .3s ease-in-out;
        }

    最后通过伪元素来设置li的高度和相关背景色的新值

    .accordionMenu li:hover{
            background: #eee;
            height:200px;
        }
        .accordionMenu li:hover h2{
            background: lime;
        }
        .accordionMenu li:hover h2:before{
            border-color:transparent transparent transparent #000;
        }

    大功告成效果图如下

    image

    如有表达不当之处,欢迎各位指出,不胜感激

  • 相关阅读:
    py二级习题
    js 闪烁的文字
    用windows 画图 裁剪照片
    JS 练习
    弧度制与角度制
    Knockout.Js官网学习(event绑定、submit绑定)
    js中进行金额计算 parseFloat 会产生精度问题,toFixed(2) 方法修正
    JQuery通过类选择器捕获click事件获取bai当前点击对象的id, javascript中onclick(this)用法介绍
    jQuery检查元素是否含有指定的class类,使用.hasClass()方法
    ajax的dataType有哪些类型?
  • 原文地址:https://www.cnblogs.com/V-JACK/p/4799334.html
Copyright © 2011-2022 走看看