关于css特效的个人总结

可展开收起的tab切换

需求：原生tab栏点击切换，并附带展开收起功能

css样式：

注意li必须浮动

span当做按钮放在ul中的末尾

  ul{
            width: 100%;
            height: 50px;
            background: #000;
            overflow: hidden;
        }
        ul li{
            width: 15%;
            float: left;  
            height: 50px;
            color: white;
            list-style-type: none;
            line-height: 50px;
            text-align: center;
            font-size: 12px;
        }
        .active{
            background: rgb(255, 255, 255);
            color: #000;
        }
        #btn{
            color: white;
            line-height: 50px;
        }

js逻辑： 

        let ul=document.querySelector("#ul");
        let list=ul.querySelectorAll("li");
        let btn=document.getElementById("btn");
        console.log(btn);
        for (let i = 0; i < list.length; i++) {
           list[i].onclick=function(){
            for (let j = 0; j < list.length; j++) {
                list[j].setAttribute('class',"");
            }
            list[i].setAttribute("class","active");
           }
        }
        btn.onclick=function () {
            btn.innerText=btn.innerText=="展开"?"收起":"展开"; 
            ul.style.height=btn.innerText=="展开"?50+'px':100+'px';
            btn.style.float=btn.innerText=="展开"?"":"left";
        }

思路： 展开时ul高度为li的两倍，li高度不变。同时改变按钮内部文字

           并且为了保证按钮在展开时位于列表末尾，添加浮动

html结构：

<ul id="ul">
        <li class="">托尼时间到了！</li>
        <li class="">托尼时间到了！</li>
        <li class="">托尼时间到了！</li>
        <li class="">托尼时间到了！</li>
        <li class="">托尼时间到了！</li>
        <li class="">托尼时间到了！</li>
        <li class="">托尼时间到了！</li>
        <li class="">托尼时间到了！</li>
        <li class="">托尼时间到了！</li>
        <li class="">托尼时间到了！</li>
        <span id="btn">展开</span>
    </ul>

背景固定，元素滚动的视差效果

 body,
      html {
        height: 100%;
      }
      * {
        margin: 0;
        padding: 0;
      }
      .fixedBg {
        min-height: 500px;
        background-image: url("./building.jpg");
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
      }
      .testBefore,
      .testAfter {
        background: #333;
        width: 100%;
        height: 300px;
        text-align: center;
      }
      h1 {
        color: #fff;
        font-size: 100px;
        line-height: 300px;
      }

    <div class="testBefore"><h1>BEFORE</h1></div>
    <div class="fixedBg"></div>
    <div class="testAfter"><h1>AFTER</h1></div>