模仿谷歌html css,jQuery和CSS3仿谷歌Material Design变形全屏遮罩特效

这是一款仿谷歌Material Design风格的jQuery和CSS3变形全屏遮罩特效。该特效在点击圆形的触发按钮之后，按钮发出一圈光波，然后全屏放大为与按钮颜色相同的遮罩层。扁平风格设计，效果非常时尚。

制作方法

HTML结构

该特效的HTML结构如下：

Content goes here

CSS样式

该特效的CSS样式如下。布局使用flexbox来制作。IE11浏览器才支持这个CSS属性，IE10及以下的浏览器布局会出现混乱。

.button-wrapper {

width: 50px;

height: 100%;

position: absolute;

bottom: 0;

right: 0;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-transform-origin: 50% 50%;

-ms-transform-origin: 50% 50%;

transform-origin: 50% 50%;

right: 20px;

bottom: 20px;

}

button {

width: 50px;

height: 50px;

border: none;

border-radius: 50%;

cursor: pointer;

box-shadow: 0 1px 3px 0 rgba(0,0,0,0.4);

z-index: 9;

position: relative;

}

.main-button {

background: #ff2670;

-webkit-align-self: flex-end;

-ms-flex-item-align: end;

align-self: flex-end;

}

.layer {

position: absolute;

left: 0;

right: 0;

bottom: 0;

width: 50px;

height: 50px;

background: #ff2670;

border-radius: 50%;

z-index: -99;

pointer-events: none;

}

.button-wrapper.clicked {

-webkit-transform: rotate(90deg) translateY(-96px);

-ms-transform: rotate(90deg) translateY(-96px);

transform: rotate(90deg) translateY(-96px);

right: 0;

bottom: 0;

-webkit-transition: .3s all ease .6s;

transition: .3s all ease .6s;

}

.button-wrapper.clicked .main-button {

opacity: 0;

-webkit-transition: .3s all ease .3s;

transition: .3s all ease .3s;

}

.button-wrapper.clicked .layer {

-webkit-transform: scale(100);

-ms-transform: scale(100);

transform: scale(100);

-webkit-transition: 2.25s all ease .9s;

transition: 2.25s all ease .9s;

}

.layered-content {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

opacity: 0;

}

.layered-content.active { opacity: 1; }

.close-button {

background: white;

position: absolute;

right: 20px;

top: 20px;

color: #ff2670;

}

.layered-content.active .close-button {

-webkit-animation: .5s bounceIn;

animation: .5s bounceIn;

}

JAVASCRIPT

该Material Design特效使用jQuery代码来为相应的元素在点击时添加和移除相应的class。

(function(){

'use strict';

var $mainButton = $(".main-button"),

$closeButton = $(".close-button"),

$buttonWrapper = $(".button-wrapper"),

$layer = $(".layered-content");

$mainButton.on("click", function(){

$buttonWrapper.addClass("clicked").delay(1500).queue(function(){

$layer.addClass("active");

});

});

$closeButton.on("click", function(){

$buttonWrapper.removeClass("clicked");

$layer.removeClass("active");

});

})();