惊艳！你见过这么炫酷动画的导航栏吗？

前端Hardy
1,950 阅读4分钟

效果演示

这段代码是一个HTML页面，包含了CSS样式和JavaScript脚本，用于创建一个具有动画效果的导航栏。

HTML

  <div id="navbarContainer">
    <div id="navbar">
        <div id="bubbleWrapper">
            <div id="bubble1" class="bubble">
                <span class="icon">
                    <img src="./即时聊天.png" alt="">
                </span>
            </div>
            <div id="bubble2" class="bubble">
                <span class="icon">
                    <img src="./火热.png" alt="">
                </span>
            </div>
            <div id="bubble3" class="bubble">
                <span class="icon">
                    <img src="./交友.png" alt="">
                </span>
            </div>
            <div id="bubble4" class="bubble">
                <span class="icon">
                    <img src="./喜欢.png" alt="">
                </span>
            </div>
        </div>
        <div id="menuWrapper">
            <div id="menu1" class="menuElement" onclick="move('1', '50px', '#ffcc80')">聊天</div>
            <div id="menu2" class="menuElement" onclick="move('2', '150px', '#81d4fa')">热点</div>
            <div id="menu3" class="menuElement" onclick="move('3', '250px', '#c5e1a5')">交友</div>
            <div id="menu4" class="menuElement" onclick="move('4', '350px', '#ce93d8')">收藏</div>
        </div>
    </div>
    <div id="bgWrapper">
        <div id="bg"></div>
        <div id="bgBubble"></div>
    </div>
</div>
<svg width="0" height="0">
    <defs>
        <filter id="goo">
            <feGaussianBlur in="SourceGraphic" stdDeviation="20" result="blur" id="blurFilter" />
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 30 -15"
                result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop" />
        </filter>
    </defs>
</svg>
  • html和body设置为占据整个视口宽度和高度，使用弹性布局居中显示，背景为渐变色且不显示滚动条。
  • #navbarContainer是一个容器，具有固定宽度和高度，背景色为#ffcc80，带有圆角、阴影和弹性布局等属性，用于容纳导航栏和其他元素。
  • #navbar是绝对定位在容器顶部的白色条，作为导航栏的一部分。
  • #bubbleWrapper是一个绝对定位的容器，用于放置四个带有图标的圆形元素（.bubble）。
  • .bubble是圆形元素，具有一定的大小、位置和样式，其中#bubble1初始状态下transform为translateY(0%)，其他的初始transform为translateY(120%)。
  • .icon内放置图标图片，初始状态下不透明。
  • #bgWrapper是另一个绝对定位的容器，用于放置背景元素和一个圆形的气泡（#bgBubble）。
  • #menuWrapper也是绝对定位的容器，用于放置四个菜单元素（.menuElement），每个菜单元素都有一定的透明度和鼠标悬停效果，并且通过点击触发move函数。
  • #contentWrapper用于放置页面的主要内容，目前隐藏。
  • .content是具体的内容元素，初始状态下不显示且不透明。
  • #navbarContainer容器包含了导航栏和其他相关元素。
  • svg标签定义了一个滤镜效果goo，用于应用在页面元素上。
  • 通过script标签引入了gsap库，并定义了一个move函数用于实现动画效果。

JavaScript

引入gsap库:https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js
<script>
    function move(id, position, color) {
        var tl = gsap.timeline();
        tl.to("#bgBubble", { duration: 0.15, bottom: "-30px", ease: "ease-out" }, 0)
            .to("#bubble1", { duration: 0.1, y: "120%", boxShadow: 'none', ease: "ease-out", }, 0)
            .to("#bubble2", { duration: 0.1, y: "120%", boxShadow: 'none', ease: "ease-out", }, 0)
            .to("#bubble3", { duration: 0.1, y: "120%", boxShadow: 'none', ease: "ease-out", }, 0)
            .to("#bubble4", { duration: 0.1, y: "120%", boxShadow: 'none', ease: "ease-out", }, 0)
            .to(".icon", { duration: 0.05, opacity: 0, ease: "ease-out", }, 0)
            .to("#bgBubble", { duration: 0.2, left: position, ease: "ease-in-out" }, 0.1)
            .to("#bgBubble", { duration: 0.15, bottom: "-50px", ease: "ease-out" }, '-=0.2')
            .to(`#bubble${id}`, { duration: 0.15, y: "0%", opacity: 1, ease: "ease-out" }, '-=0.1')
            .to(`#bubble${id}> span`, { duration: 0.15, y: "0%", opacity: 0.7, ease: "ease-out" }, '-=0.1')
            .to("#navbarContainer", { duration: 0.3, backgroundColor: color, ease: "ease-in-out" }, 0)
            .to("#bg", { duration: 0.3, backgroundColor: color, ease: "ease-in-out" }, 0)
            .to("#bgBubble", { duration: 0.3, backgroundColor: color, ease: "ease-in-out" }, 0);
    }
</script>
  • 使用了GSAP（GreenSock Animation Platform）库来创建动画效果。
  • move 函数是一个动画控制器，它接受三个参数：id（气泡的编号），position（气泡移动到的位置），color（导航栏背景颜色）。
  • 函数内部使用GSAP的timeline来创建一系列的动画，包括气泡的移动、透明度变化、背景颜色变化等。

CSS

  html,body {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
        overflow: hidden;
        background: #f7d6ff;
        background-image: linear-gradient(to bottom right, #91defe, #99c0f9, #bdb6ec, #d7b3e3, #efb3d5, #f9bccc);
    }

    #navbarContainer {
        width: 400px;
        min-width: 400px;
        height: 70vh;
        background-color: #ffcc80;
        border-radius: 20px;
        display: flex;
        justify-content: flex-end;
        flex-direction: column;
        overflow: hidden;
        position: relative;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    }

    #navbar {
        width: 100%;
        height: 60px;
        background-color: #fff;
        position: absolute;
    }

    #bubbleWrapper {
        position: absolute;
        display: flex;
        justify-content: space-around;
        width: 100%;
        bottom: 25px;
    }

    .bubble {
        /* background-color: #fff; */
        width: 50px;
        height: 50px;
        bottom: 85px;
        border-radius: 50%;
        z-index: 1;
        transform: translateY(120%);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .icon {
        opacity: 0;
    }

    .icon img {
        height: 40px;
        width: 40px;
    }

    #bubble1 {
        transform: translateY(0%);

        /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); */
        >span {
            opacity: 0.7;
        }
    }

    #bgWrapper {
        filter: url(#goo);
        width: 100%;
        height: 100px;
        position: absolute;
        bottom: 60px;
    }

    #bg {
        background-color: #ffcc80;
        width: 120%;
        height: 100%;
        margin-left: -10%;
    }

    #bgBubble {
        position: absolute;
        background-color: #ffcc80;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        bottom: -50px;
        left: 50px;
        transform: translateX(-50%);
    }

    #menuWrapper {
        position: absolute;
        width: 100%;
        display: flex;
        justify-content: space-around;
    }

    .menuElement {
        opacity: 0.4;
        transform: translateY(100%);
        cursor: pointer;

        &:hover {
            opacity: 0.5;
        }
    }

    #contentWrapper {
        position: absolute;
        top: 50%;
        width: 100%;
        transform: translateY(-50%);
        display: flex;
        justify-content: center;
        align-items: center;

        h2 {
            color: #fff;
            font-family: sans-serif;
            font-weight: 400;
        }
    }

    .content {
        display: none;
        opacity: 0;
    }
</style>
  • #navbarContainer 是导航栏的容器，设置了宽度、高度、背景颜色和圆角。
  • #navbar 是导航栏本身，设置了宽度、高度和背景颜色。
  • #bubbleWrapper 包含了四个 bubble 类的元素，这些是导航栏上的气泡图标。
  • .bubble 类定义了气泡的基本样式，包括尺寸、圆角和初始的Y轴位置。
  • .icon 类定义了图标的初始透明度和图片尺寸。
  • #bgWrapper 和 #bg 定义了导航栏背景的样式。
  • #bgBubble 是一个圆形背景，用于动画效果。
  • #menuWrapper 包含了导航菜单项。
  • .menuElement 类定义了菜单项的基本样式和悬停效果。
  • #contentWrapper 和 .content 类定义了页面内容的样式，但.content 类默认是不显示的。
avatar
文章
阅读
粉丝