html5 css 弹出输入框,一个很有动感的弹出框css

//variables

$light-grey: #434343;

$dark-grey: #212121;

$blue:#00adee;

$margin-bottom: 25px;

// body styling

html{

height:100%;

}

body{

display:flex;

justify-content:center;

align-items:center;

font-family: 'Source Sans Pro', sans-serif;

font-weight: 400;

background: linear-gradient($light-grey, $dark-grey);

height: 100%;

margin: 0;

background-repeat: no-repeat;

background-attachment: fixed;

}

body *{

box-sizing:border-box;

}

section{

display: flex;

flex: 0 500px;

}

.wrapper{

position:relative;

display:flex;

flex-flow:column;

flex:1;

padding:40px;

margin:15px;

border-radius:10px;

background:#fff;

box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);

transition:all 0.4s linear;

&:hover{

box-shadow: 0px 8px 200px rgba(0, 0, 0, 1);

}

}

.close {

position:absolute;

top:-10px;

right:-10px;

display:flex;

align-items:center;

justify-content:center;

background:#000;

color:white;

width:30px;

height:30px;

border-radius:50%;

text-decoration:none;

transition:all 0.4s linear;

box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3);

&:hover{

background:$blue;

}

}

h1 {

font-size:36px;

font-weight:700;

margin-bottom:$margin-bottom;

line-height:1.2;

}

h2 {

font-size:20px;

font-weight:700;

margin-bottom:$margin-bottom;

}

p{

line-height:1.5;

margin-bottom:$margin-bottom;

}

button {

display:flex;

justify-content:center;

background:$blue;

color:white;

border:none;

margin-bottom:$margin-bottom;

padding:15px;

font-weight:700;

font-size:14px;

border-radius:5px;

transition:all 0.4s linear;

cursor: pointer;

&:hover{

background:darken($blue, 20%);

}

}

.email-capture{

display:flex;

button{

padding:0px 20px;

}

input{

flex:1;

padding:0 0 0 20px;

margin:0;

border:none;

height:40px;

background:#eee;

border-radius:2px;

}

}

//animations

$easeOutCust:cubic-bezier(.03,.16,.39,0.99);

$easeInQuad: cubic-bezier(0.550, 0.085, 0.680, 0.530);

$easeOutBack: cubic-bezier(0.175, 0.885, 0.320, 1.275);

$globalDelay: .8; //just so we can see what's going on even when codepen refreshes funny

@keyframes slideIn {

from {transform:translateY(400px);}

to {transform:translateY(0);}

}

@keyframes fadeIn {

from {opacity:0;}

to{ opaticy: 1;}

}

@keyframes slideDown {

from {transform: translateY(-120px);}

to {transform: translateY(0);}

}

@keyframes slideInShort {

from {transform:translateY(80px);}

to {transform:translateY(0);}

}

@keyframes blink {

0% { box-shadow: 0 0 25px $blue; }

50% { box-shadow: none; }

}

section {

animation:

slideIn .65s $globalDelay+0s $easeOutBack both,

fadeIn 0.25s $globalDelay+0s $easeInQuad both;

}

button {

animation: slideDown 0.7s $globalDelay+.35s $easeOutCust both,

fadeIn .2s $globalDelay+.3s $easeInQuad both, blink 2.0s linear infinite;

}

h1, h2 {

animation:

slideInShort 0.25s $globalDelay+.25s $easeOutCust both,

fadeIn 0.1s $globalDelay+.2s $easeInQuad both;

}

p, .email-capture, .close {

animation:

slideInShort 0.25s $globalDelay+.3s $easeOutCust both,

fadeIn 0.1s $globalDelay+.25s $easeInQuad both;

}