一款带屋檐滴雨动效的汉堡菜单

h5, menu, gooey

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2486
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

(function($) {

var header = $('#header-bg');
    var menuButton = $('#menu-icon');
    var menuButtonX = $('#menu-icon-x');
    var menuIcon = $('.header-el');
    var menuIconPhoto = $('#header-photo');
    var menuIconPeople = $('#header-people');
    var menuIconMex = $('#header-mex');
    var menuIconHeart = $('#header-heart');

var homeElement = $('.el-home-anima');
    var tlhome = new TimelineMax();

//start
    menuButton.addClass('menu-icon-in');
    menuButtonX.addClass('menu-icon-out');
    header.addClass('header-bg');
    tlhome
        .staggerFrom(homeElement, 0.6, {
            y: 20,
            autoAlpha: 0,
            ease: Bounce.easeOut
        }, 0.2);

//button menu
    menuButton.on('click', function() {
        menuButton.removeClass('menu-icon-in');
        menuButton.addClass('menu-icon-out');
        menuButtonX.addClass('menu-icon-in');
        menuButtonX.removeClass('menu-icon-out');

menuIconPhoto.addClass('header-el-anima');
        menuIconPeople.addClass('header-el-anima');
        menuIconMex.addClass('header-el-anima');
        menuIconHeart.addClass('header-el-anima');
    });

menuButtonX.on('click', function() {
        header.addClass('header-bg');
        header.removeClass('header-bg-photo');
        header.removeClass('header-bg-people');
        header.removeClass('header-bg-mex');
        header.removeClass('header-bg-heart');

menuButton.addClass('menu-icon-in');
        menuButton.removeClass('menu-icon-out');
        menuButtonX.addClass('menu-icon-out');
        menuButtonX.removeClass('menu-icon-in');

menuIconPhoto.removeClass('header-el-anima');
        menuIconPeople.removeClass('header-el-anima');
        menuIconMex.removeClass('header-el-anima');
        menuIconHeart.removeClass('header-el-anima');
        tlhome.restart();
    });

//button Photo
    menuIconPhoto.on('click', function() {

menuButton.removeClass('menu-icon-in');
        menuButton.addClass('menu-icon-out');
        menuButtonX.addClass('menu-icon-in');
        menuButtonX.removeClass('menu-icon-out');

menuIconPhoto.toggleClass('header-el-anima');
        menuIconPeople.toggleClass('header-el-anima');
        menuIconMex.toggleClass('header-el-anima');
        menuIconHeart.toggleClass('header-el-anima');
        header.addClass('header-bg-photo');
        header.removeClass('header-bg-people');
        header.removeClass('header-bg-mex');
        header.removeClass('header-bg-heart');
        tlhome.restart();
    });
    menuIconPeople.on('click', function() {

menuButton.removeClass('menu-icon-in');
        menuButton.addClass('menu-icon-out');
        menuButtonX.addClass('menu-icon-in');
        menuButtonX.removeClass('menu-icon-out');

menuIconPhoto.toggleClass('header-el-anima');
        menuIconPeople.toggleClass('header-el-anima');
        menuIconMex.toggleClass('header-el-anima');
        menuIconHeart.toggleClass('header-el-anima');
        header.addClass('header-bg-people');
        header.removeClass('header-bg-photo');
        header.removeClass('header-bg-mex');
        header.removeClass('header-bg-heart');
        tlhome.restart();
    });
    menuIconMex.on('click', function() {

menuButton.removeClass('menu-icon-in');
        menuButton.addClass('menu-icon-out');
        menuButtonX.addClass('menu-icon-in');
        menuButtonX.removeClass('menu-icon-out');

header.addClass('header-bg-mex');
        header.removeClass('header-bg-photo');
        header.removeClass('header-bg-people');
        header.removeClass('header-bg-heart');
        tlhome.restart();
    });
    menuIconHeart.on('click', function() {
        menuButton.removeClass('menu-icon-in');
        menuButton.addClass('menu-icon-out');
        menuButtonX.addClass('menu-icon-in');
        menuButtonX.removeClass('menu-icon-out');

menuIconPhoto.toggleClass('header-el-anima');
        menuIconPeople.toggleClass('header-el-anima');
        menuIconMex.toggleClass('header-el-anima');
        menuIconHeart.toggleClass('header-el-anima');
        header.addClass('header-bg-heart');
        header.removeClass('header-bg-photo');
        header.removeClass('header-bg-people');
        header.removeClass('header-bg-mex');
        tlhome.restart();
    });

})(jQuery);

编译

CSS

body {
    background-color: #52206d;
    margin: 0;
    padding: 0;
}
.container {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}
#all-container {
    border-radius: 5px;
    height: 600px;
    width: 600px;
}
#phone {
    /*   background-color: whitesmoke; */
    
    border-radius: 5px;
    box-shadow: 10px 10px 30px rgba( 0, 0, 0, 0.5);
    height: 280px;
    overflow: hidden;
    width: 300px;
}
/* ////////////////////////////////////// header background ///// */

#header {
    position: relative;
    z-index: 99;
    filter: url('#goo');
}
#header-bg {
    animation-fill-mode: both;
    height: 60px;
    position: absolute;
    width: 100%;
}
.header-bg {
    animation-name: header-bg;
    animation-duration: 0.4s;
}
@keyframes header-bg {
    100% {
        background-color: #fff;
    }
}
.header-bg-photo {
    animation-name: header-bg-photo;
    animation-duration: 0.4s;
}
@keyframes header-bg-photo {
    100% {
        background-color: #2E92ED;
    }
}
.header-bg-people {
    animation-name: header-bg-people;
    animation-duration: 0.4s;
}
@keyframes header-bg-people {
    100% {
        background-color: #21C49B;
    }
}
.header-bg-mex {
    animation-name: header-bg-mex;
    animation-duration: 0.4s;
}
@keyframes header-bg-mex {
    100% {
        background-color: #F0BE11;
    }
}
.header-bg-heart {
    animation-name: header-bg-heart;
    animation-duration: 0.4s;
}
@keyframes header-bg-heart {
    100% {
        background-color: #DF681A;
    }
}
/* ////////////////////////////////////// header icon menu ///// */

.menu-icon {
    cursor: pointer;
    left: 15px;
    opacity: 1;
    position: absolute;
    top: 30px;
    transform: translateY(-50%);
    transition: 0.2s ease-in-out;
}
.menu-icon-in {
    opacity: 1;
    top: 30px;
}
.menu-icon-out {
    opacity: 0;
    top: -20px;
}
/* ////////////////////////////////////// header elements ///// */

.header-el {
    border-radius: 50%;
    cursor: pointer;
    height: 50px;
    opacity: 0;
    position: absolute;
    width: 50px;
    top: 10px;
    transition: top 0.6s cubic-bezier(.82, .01, .17, 1.26);
}
.header-el:hover {
    transform: scale(1.1);
}
.header-el-anima {
    opacity: 1;
    top: 75px;
}
#header-photo {
    background-color: #2E92ED;
    left: 15px;
    transition-delay: 0;
}
#header-people {
    background-color: #21C49B;
    left: 88px;
    transition-delay: 0.1s;
}
#header-mex {
    background-color: #F0BE11;
    right: 88px;
    transition-delay: 0.2s;
}
#header-heart {
    background-color: #DF681A;
    right: 15px;
    transition-delay: 0.3s;
}
.el {
    color: #fff;
    font-size: 1.2em;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}
/* ////////////////////////////////////// home elements ///// */

#el-home-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 80px auto 0 auto;
    opacity: 0.3;
    width: 90%;
    z-index: -99;
}
.el-home {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 2px 2px 30px rgba( 0, 0, 0, 0.4);
    margin-bottom: 10px;
}
.el-home-01 {
    height: 120px;
    width: 100%;
}
.el-home-02 {
    height: 120px;
    width: 48%;
}
.el-home-03 {
    height: 170px;
    width: 48%;
}
#link {
    bottom: 20px;
    color: #fff;
    opacity: 0.6;
    display: flex;
    align-items: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
#link p {
    font-size: 20px;
    margin: 0;
    margin-left: 5px;
}
#link:hover {
    opacity: 1;
}

HTML

</div>
</div>

<svg xmlns="https://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="goo">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
            <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" />
            <feBlend in="SourceGraphic" in2="goo" />
        </filter>
    </defs>
</svg>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenLite.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TimelineMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/plugins/CSSPlugin.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/easing/EasePack.min.js'></script>
<script src='https://use.fontawesome.com/releases/v5.0.7/js/all.js'></script>

h5, menu, gooey

编辑器支持Emmet

快捷键

h5, menu, gooey

一款带果冻切换效果的移动菜单导航栏

带波浪变形展开动画的下拉汉堡菜单

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：