html用户引导动画制作,HTML5 用户注册引导卡片

CSS

语言：

CSSSCSS

确定

html {

height: 100%;

}

body {

/* For Safari 5.1 to 6.0 */

background: -webkit-linear-gradient(#348ac7, #7474bf);

/* For Opera 11.1 to 12.0 */

background: -o-linear-gradient(#348ac7, #7474bf);

/* For Firefox 3.6 to 15 */

background: -moz-linear-gradient(#348ac7, #7474bf);

background: linear-gradient(#348ac7, #7474bf);

}

.card {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -60%);

-webkit-transform: translate(-50%, -60%);

-webkit-touch-callout: none;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

.box {

background-color: white;

width: 400px;

height: 235px;

border-radius: 5px;

}

.box h1 {

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

font-weight: 400;

font-size: 21pt;

padding-left: 25px;

padding-top: 20px;

}

.box p {

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

font-weight: 300;

padding-left: 25px;

padding-right: 40px;

color: black;

}

.tri {

width: 0;

height: 0;

border-left: 25px solid transparent;

border-right: 25px solid transparent;

border-bottom: 25px solid white;

margin-left: 45px;

margin-bottom: -20px;

}

#back {

width: 60px;

height: 40px;

display: inline-block;

cursor: pointer;

-webkit-touch-callout: none;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

}

#back p {

text-align: center;

color: #3498db;

font-family: sans-serif;

}

#next {

display: inline-block;

float: right;

background: #3498db;

height: 40px;

width: 75px;

cursor: pointer;

border-radius: 0 0 5px;

}

#next p {

margin-left: -3px;

color: white;

text-align: center;

font-family: sans-serif;

}

#progress {

display: inline-block;

width: 168px;

margin-left: 45px;

}

.bubble {

width: 10px;

height: 10px;

background-color: #daecf9;

display: inline-block;

border-radius: 12.5px;

position: absolute;

}

.connector {

display: inline-block;

width: 50px;

height: 2px;

background-color: #daecf9;

vertical-align: middle;

margin-right: -0.25em;

margin-top: -6px;

margin-left: 6px;

}

.bubble-fill {

background-color: #3498db;

}

.tap {

margin-left: 1.5px;

}

.bottom-element {

height: 40px;

width: 400px;

position: absolute;

bottom: 0;

}

.social {

text-align: center;

}

.twitter {

color: #3177a5;

font-family: sans-serif;

text-decoration: none;

}

.twitter:hover {

color: #ecf0f1;

}

.github {

color: #3177a5;

font-family: sans-serif;

text-decoration: none;

}

.github:hover {

color: #ecf0f1;

}

p {

color: #2c6a9a;

}