html礼盒打开效果,HTML5 原质化设计 礼盒开启的页面模板

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100);

html * {

font-family: Roboto !important;

font-weight: 100;

box-sizing: border-box;

}

.button {

width: 50px;

height: 50px;

position: absolute;

top: -19px;

right: 20px;

}

.button > * {

width: 100%;

border-radius: 50%;

text-align: center;

padding: 50% 0;

line-height: 0;

margin: 0;

background-color: #e95de3;

color: white;

font-size: 20px;

box-shadow: 2px 2px 10px -2px #4d4d4d;

}

.header {

height: 60px;

width: 100%;

background-color: #17a5a5;

color: white;

box-shadow: 2px 2px 5px 2px #ddd;

}

.header h1 {

text-align: center;

position: relative;

top: 50%;

-webkit-transform: translateY(-50%);

-ms-transform: translateY(-50%);

transform: translateY(-50%);

margin: 0 auto;

font-size: 30px;

}

ul {

width: 100%;

}

.item {

overflow: hidden;

margin: 80px auto;

max-width: 600px;

width: 100%;

}

.primary {

height: 300px;

background-color: #eee;

color: darkgray;

font-size: 50px;

position: relative;

text-align: right;

}

.primary .spoiler {

margin: 0 10px;

position: absolute;

bottom: 40px;

right: 0;

}

.present {

position: absolute;

top: 0px;

left: 0px;

width: 100%;

height: calc(100% + 77px);

background-color: red;

-webkit-transform: translateY(100%);

-ms-transform: translateY(100%);

transform: translateY(100%);

-webkit-transition: all 0.4s 0.1s ease-out;

transition: all 0.4s 0.1s ease-out;

}

.present.tada {

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

transition: all 0.3s ease-in;

-webkit-transform: translateY(0%);

-ms-transform: translateY(0%);

transform: translateY(0%);

}

.title,

.secondary {

padding: 0 10px;

z-index: 2;

background-color: #fafafa;

}

.title {

border-top: 1px solid #dadada;

position: relative;

width: 100%;

color: #868686;

font-size: 30px;

padding: 10px 10px;

-webkit-transition: all 0.6s ease;

transition: all 0.6s ease;

}

.secondary {

color: #acacac;

line-height: 20px;

font-size: 14px;

padding: 20px 0;

}

.title.tada2 {

-webkit-transform: translateY(77px);

-ms-transform: translateY(77px);

transform: translateY(77px);

-webkit-transition: all 0.6s ease;

transition: all 0.6s ease;

}