html手机点击弹出动画效果,HTML5 移动应用模态窗口弹出式动画

CSS

语言：

CSSSCSS

确定

html,

*,

*:before,

*:after {

box-sizing: border-box;

}

body,

h1,

h2,

h3,

h4,

h5,

h6 {

font-family: 'Lato', sans-serif;

}

body {

min-height: 100vh;

padding: 25px;

background: -webkit-linear-gradient(#fafafa, #f1f1f1);

background: linear-gradient(#fafafa, #f1f1f1);

position: relative;

}

.prototype {

width: 320px;

height: 480px;

border-radius: 5px;

background: #58228b;

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate3d(-50%, -50%, 0);

transform: translate3d(-50%, -50%, 0);

box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);

overflow: hidden;

}

.header {

cursor: pointer;

}

.header .hamburger {

display: inline-block;

line-height: 1;

margin: 0 15px 0 15px;

width: 18px;

height: 3px;

background: white;

line-height: 40px;

position: relative;

}

.header .hamburger:before,

.header .hamburger:after {

content: '';

display: inline-block;

width: 18px;

height: 3px;

position: absolute;

background: white;

}

.header .hamburger:before {

top: -6px;

left: 0;

}

.header .hamburger:after {

top: 6px;

left: 0;

}

.header h1 {

display: inline-block;

line-height: 40px;

height: 40px;

vertical-align: middle;

margin: 4px 0 0 0;

font-size: 20px;

font-weight: 500;

letter-spacing: 2px;

color: white;

text-transform: uppercase;

}

.content {

padding: 25px;

}

.content button {

display: block;

width: auto;

margin: 0 auto;

cursor: pointer;

border: 2px solid rgba(255, 255, 255, 0.5);

border-radius: 20px;

padding: 10px 20px;

background: rgba(255, 255, 255, 0);

text-transform: uppercase;

font-size: 14px;

color: white;

text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.25);

-webkit-transition: 0.3s ease-in-out;

transition: 0.3s ease-in-out;

}

.content button:hover {

border-color: white;

background: rgba(255, 255, 255, 0.1);

}

.content .mask {

cursor: pointer;

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate3d(-50%, -50%, 0);

transform: translate3d(-50%, -50%, 0);

width: 80px;

height: 80px;

border-radius: 50%;

overflow: hidden;

background: #5856d6;

z-index: 999;

box-shadow: 0 5px 30px rgba(0, 0, 0, 0.25);

-webkit-transition: top 1.5s cubic-bezier(0.55, 0, 0.1, 1), width 0.5s cubic-bezier(0.55, 0, 0.1, 1) 0.7s, height 0.5s cubic-bezier(0.55, 0, 0.1, 1) 0.7s;

transition: top 1.5s cubic-bezier(0.55, 0, 0.1, 1), width 0.5s cubic-bezier(0.55, 0, 0.1, 1) 0.7s, height 0.5s cubic-bezier(0.55, 0, 0.1, 1) 0.7s;

}

.content .mask.is-open {

top: 0;

width: 1500px;

height: 1500px;

}