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

CSS

语言：

CSSSCSS

确定

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;

}