zoukankan      html  css  js  c++  java
  • 零基础学前端开发 色彩缤纷的Bottom Bar

    零基础学前端开发  色彩缤纷的Bottom Bar

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        <title>Material BottomBar</title>

        <style>

            @keyframes morewidth {

                from {

                    padding: 0 12px;

                }

                to {

                    padding: 0 18px;

                }

            }

            @keyframes active1 {

                to {

                   

                }

            }

            @keyframes active2 {

                to {

                   

                }

            }

            @keyframes active3 {

                to {

                   

                }

            }

            @keyframes active4 {

                to {

                   

                }

            }

            @keyframes active5 {

                to {

                   

                }

            }

            html,

            body {

                100%;

                height: 100%;

                margin: 0;

                padding: 0;

            }

            .bottom-bar {

                375px;

                height: 56px;

                position: relative;

                margin: 0;

                padding: 0;

                list-style: none;

                display: flex;

               

            }

            .bottom-bar li {

                flex-grow: 1;

                padding: 0 12px;

                cursor: pointer;

            }

            .bottom-bar li:hover {

                animation: morewidth 0.2s forwards;

            }

            .bottom-bar li span {

                height: 100%;

                display: flex;

                flex-direction: column;

                justify-content: center;

                align-items: center;

            }

            .bottom-bar li span b {

                color: white;

                font-weight: lighter;

                font-size: 12px;

            }

            .bottom-bar li span b:nth-child(2) {

                0;

                height: 0;

                overflow: hidden;

            }

            .bottom-bar li:hover span b:nth-child(2) {

                auto;

                height: auto;

            }

            .bottom-bar li span>b:first-child {

                24px;

                height: 24px;

                display: inline-block;

            }

        </style>

    </head>

    <body>

        <ul class="bottom-bar">

            <li class="bar-item" data-key="page1"><span><b style="background-image:url(
    )"></b><b>one</b></span></li>

            <li class="bar-item" data-key="page2"><span><b style="background-image:url(
    )"></b><b>two</b></span></li>

            <li class="bar-item" data-key="page3"><span><b style="background-image:url(
    )"></b><b>three</b></span></li>

            <li class="bar-item" data-key="page4"><span><b style="background-image:url(
    )"></b><b>four</b></span></li>

            <li class="bar-item" data-key="page5"><span><b style="background-image:url(
    )"></b><b>five</b></span></li>

        </ul>

        <script>

            var bar = document.querySelector('.bottom-bar');

            bar.addEventListener('mousemove', function (e) {

                e.path.forEach(p => {

                    if (p.className == "bar-item") {

                        switch (p.dataset.key) {

                            case "page1":

                                bar.style.animation = "active1 0.3s forwards";

                                break;

                            case "page2":

                                bar.style.animation = "active2 0.3s forwards";

                                break;

                            case "page3":

                                bar.style.animation = "active3 0.3s forwards";

                                break;

                            case "page4":

                                bar.style.animation = "active4 0.3s forwards";

                                break;

                            case "page5":

                                bar.style.animation = "active5 0.3s forwards";

                                break;

                        }

                    }

                })

            })

        </script>

    </body>

    </html>

    ​零基础学前端开发,大量公益学习资源,进裙web前端25群下载

  • 相关阅读:
    汉罗塔
    汉罗塔动画实现
    画五星红旗
    科学与可视化
    类和正则表达式
    圆周率
    汉诺塔
    jieba库
    Python图片处理
    随手笔记
  • 原文地址:https://www.cnblogs.com/xsns/p/6840031.html
Copyright © 2011-2022 走看看