HTML5 GSAP移动应用中点击按钮液体弥漫全屏的交互动画

和材料化按钮的交互效果类似，点击按钮后背景色扩散到全屏。

html5, button, interaction

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var selected = null;
var tempSelected = null;
$(".icon").click(function() {

if (selected != null) {
        tempSelected = selected;
    }
    selected = $(this);
    $(this).find(".background_circle").css({
        display: "block",
        opacity: "1"
    });

var color = $(this).find(".background_circle").css("backgroundColor");
    console.log(color);
    var tl = new TimelineMax();
    tl.to($(this).find(".background_circle"), 1, {
        scale: 15,
        transformOrigin: "50% 50%",
        ease: Linear.easeIn
    }).to($(".text"), 0.25, {
        display: "block",
        opacity: 1,
        ease: Linear.easeIn
    });

if (
        tempSelected !== null &&
        $(this).attr("class") !== tempSelected.attr("class")
    ) {
        TweenMax.to(
            tempSelected.find(".background_circle"),
            0, {
                opacity: 0,
                scale: 0,
                transformOrigin: "50% 50%",
                ease: Linear.easeIn
            },
            "-=3"
        );
    }
});

$(".back").click(function() {
    console.log("in click function");
    console.log(selected);
    if (
        selected !== null &&
        $(this).attr("class") !== selected.attr("class")
    ) {
        TweenMax.to(
            selected.find(".background_circle"),
            1, {
                scale: 0,
                transformOrigin: "50% 50%",
                ease: Linear.easeIn
            }
        );

TweenMax.to($(".text"), 0.25, {
            display: "none",
            opacity: 0,
            ease: Linear.easeOut
        }, "-=1");
    }
});

编译

CSS

body {
    background: #4CA1AF;
    /* fallback for old browsers */
    
    background: -webkit-linear-gradient(to right, #C4E0E5, #4CA1AF);
    /* Chrome 10-25, Safari 5.1-6 */
    
    background: linear-gradient(to right, #C4E0E5, #4CA1AF);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.time {
    display: inline;
    font-size: 10px;
    float: none;
    top: -4px;
    left: 60px;
    position: relative;
    font-size: 10px;
    color: white;
    font-family: 'Helvetica';
}
.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
}
.iphone {
    -webkit-box-shadow: 0px 0px 38px -10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 38px -10px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 38px -10px rgba(0, 0, 0, 0.5);
}
.iphone_screen {
    height: 450px;
    width: 254px;
    background-color: white;
}
.nav_bar {
    height: 15px;
    width: 254px;
    background-color: #46494C;
}
.nav_bar_below {
    position: relative;
    height: 30px;
    width: 254px;
    margin-top: 0px;
    background-color: #46494C;
    margin-top: -3px;
}
.back {
    position: relative;
    top: 0px;
    left: 6px;
    font-size: 25px;
    cursor: pointer;
}
.container {
    padding-top: 2px;
}
.fa {
    color: white;
}
.circle_bars {
    position: relative;
    left: 5px;
    top: 3px;
}
.circle {
    height: 4px;
    width: 4px;
    position: relative;
    border-radius: 50%;
    background-color: white;
    float: left;
    margin: 0.5px;
}
.fa-battery-three-quarters {
    float: right;
    margin-right: 5px;
    font-size: 11px;
}
.fa-wifi {
    position: relative;
    font-size: 10px;
    margin-left: 8px;
    top: -4px;
}
.main_screen {
    position: relative;
    overflow: hidden;
    height: 371px;
    background-color: #DCDCDD;
}
.text {
    display: none;
    opacity: 0;
    padding: 30px;
    top: 130px;
    text-align: center;
    font-family: Raleway, sans-serif;
    color: white;
    position: absolute;
    z-index: 10;
}
.icon {
    height: 50px;
    width: 50px;
    border: 3px solid white;
    border-radius: 50%;
    text-align: center;
    color: white;
    display: block;
    vertical-align: middle;
    line-height: 60px;
    cursor: pointer;
    margin-top: 30px;
    margin-left: 102px;
}
.icon.instagram {
    line-height: 65px !important;
}
.user .background_circle {
    display: none;
    width: 52px;
    height: 54px;
    position: absolute;
    border-radius: 50%;
    top: 30px;
    left: 1;
    z-index: 1;
    background-color: #525174;
}
.mail .background_circle {
    display: none;
    width: 52px;
    height: 54px;
    position: absolute;
    border-radius: 50%;
    top: 115px;
    left: 1;
    z-index: 1;
    background-color: #FFC949;
}
.photos .background_circle {
    display: none;
    width: 52px;
    height: 54px;
    position: absolute;
    border-radius: 50%;
    top: 200px;
    left: 1;
    z-index: 1;
    background-color: #348AA7;
}
.settings .background_circle {
    display: none;
    width: 52px;
    height: 54px;
    position: absolute;
    border-radius: 50%;
    top: 285px;
    left: 1;
    z-index: 1;
    background-color: #FFA649;
}
.user:hover,
.user:active {
    background-color: #525174;
}
.mail:hover,
.mail:active {
    background-color: #FFC949;
}
.photos:hover,
.photos:active {
    background-color: #348AA7;
}
.settings:hover,
.settings:active {
    background-color: #FFA649;
}
.nav_bar_bottom {
    height: 37px;
    width: 254px;
    background-color: #46494C;
    position: relative;
}

HTML

<div class="main_screen">
                <div class="icon_group">
                    <a rel="nofollow" rel="noreferrer" class="icon user"><i class="fa fa-user-o fa-2x" aria-hidden="true"></i><div class="background_circle"></div></a>
                    <a rel="nofollow" rel="noreferrer" class="icon mail"><i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i><div class="background_circle"></div></a>
                    <a rel="nofollow" rel="noreferrer" class="icon photos"><i class="fa fa-picture-o fa-2x" aria-hidden="true"></i><div class="background_circle"></div></a>
                    <a rel="nofollow" rel="noreferrer" class="icon settings"><i class="fa fa-sliders fa-2x" aria-hidden="true"></i><div class="background_circle"></div></a>
                </div>
                <div class="text">Click the back button to make a different selection.</div>
            </div>
            <div class="nav_bar_bottom"></div>
        </div>
    </div>
</div>

和材料化按钮的交互效果类似，点击按钮后背景色扩散到全屏。

html5, button, interaction

编辑器支持Emmet

快捷键

和材料化按钮的交互效果类似，点击按钮后背景色扩散到全屏。

html5, button, interaction

HTML5 GSAP溅泼式按钮交互动画

HTML5 GSAP点击立方体起跳动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：