我是小渔歌，点击右上方“关注”，每天为你分享【前端技术知识】干货。

虽然所有的效果都可以用JavaScript来写，但css的运行效率比JavaScript高。

能用CSS实现的就别麻烦JavaScript了。

下面来看看哪些效果CSS也可以做到，而且做的更好。

下拉菜单

默认子菜单隐藏，利用button按钮的 focus，再赋予子菜单显示。

下拉菜单图示

<style>    .menu {        position: relative;        width: 80px;    }    .menu-parent {        width: 80px;        height: 30px;        background: #fff;        outline: none;        border: none;    }    .menu-child-box {        transition: 0.5s;        transform: scale(0);        position: absolute;        right: 0;        top: 30px;        box-shadow: 0px 2px 6px #f5f5f5, 0px 1px 2px #f5f5f5;        padding: 5px 2px;        border-radius: 5px;        background-color: #ffffff;    }    .menu-child {        font-size: 12px;        padding: 10px 5px;        min-width: 80px;        text-align: center;        box-sizing: border-box;    }    .menu-parent:focus {        border: 1px solid blue;    }    .menu-parent:focus+.menu-child-box {        transform: scale(1);    }</style> <div class="menu">        <button class="menu-parent">            菜单        </button>        <div class="menu-child-box">            <div class="menu-child">                子菜单1            </div>            <div class="menu-child">                子菜单2            </div>        </div>    </div>

平滑滚动（回到顶部）

利用scroll-behavior:smooth; 头部设置一个元素绑定一个id，利用a标签href绑定这个id,点击这个标签即可回到顶部。

平滑滚动图示

html {        scroll-behavior: smooth;    }        .container {        display: flex;        flex-flow: column;        height: 300px;        scroll-behavior: smooth;        overflow: auto;    }    /* .header {        position: sticky;        top: 0;    } */        .p {        flex: 1;    }        .p-item {        height: 100px;    }<div class="container">        <div id="four" class="header">            这里是header        </div>        <div class="p">            <div class="p-item">                1            </div>            <div class="p-item">                1            </div>            <div class="p-item">                1            </div>            <div class="p-item">                1            </div>            <div class="p-item">                1            </div>            <div class="p-item">                1            </div>            <div class="p-item">                1            </div>            <div class="p-item">                1            </div>            <div class="p-item">                1            </div>            <div class="p-item">                1            </div>            <div class="p-item">                1            </div>            <div class="p-item">                1            </div>        </div>        <div class="footer">            <a href="#four">回到顶部</a>        </div>    </div>

幻灯片效果（滚动捕捉）

利用父级元素设置样式scroll-snap-type:x mandatory;子级元素设置样式scroll-snap-align:start;

幻灯片效果图示

/* 幻灯片样式开始 */        .parent {        scroll-snap-type: x mandatory;        height: 100px;        overflow: auto;        display: flex;        flex-wrap: nowrap;        width: 300px;    }        * {        padding: 0;    }        .child {        scroll-snap-align: start;        background-color: green;        height: 100px;        width: 300px;        flex-shrink: 0;        display: flex;        align-items: center;        justify-content: center;        font-size: 28px;    }    /* 幻灯片样式结束 */ <main class="parent">        <section class="child">            1        </section>        <section class="child">            2        </section>        <section class="child">            3        </section>   </main>

粘性导航

利用粘性定位 position：sticky；

粘性导航图示

只需将平滑滚动中的header样式注释打开就可实现头部固定效果。

你还知道哪些可以不用js实现的效果吗？

往期精彩内容

在JavaScript中call与apply的实际应用你知道多少？

函数的防抖与节流你用对了吗？