<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3新年礼盒</title>
<style>
body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 100vh;
background-color: #1e2f27;
}
.present {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
margin-top: 10vw;
width: 30vw;
height: 25vw;
}
.present__box {
background-color: #FE4365;
background-image: -webkit-repeating-linear-gradient(45deg, #fe2f54, #fe2f54 1px, #FE4365 1px, #FE4365 4px);
background-image: repeating-linear-gradient(45deg, #fe2f54, #fe2f54 1px, #FE4365 1px, #FE4365 4px);
position: absolute;
width: 100%;
height: 100%;
border-radius: 0 0 0.5vw 0.5vw;
box-shadow: inset -6px -6px 36px rgba(0, 0, 0, 0.1);
}
.present__ribbon--horizontal,
.present__ribbon--vetical {
content: "";
position: absolute;
margin: auto;
background-color: #F9CDAD;
}
.present__ribbon--vertical {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
margin: auto;
width: 5vw;
height: 100%;
background-color: #F9CDAD;
background-image: -webkit-linear-gradient(10deg, transparent, rgba(255, 255, 255, 0.4) 70%, transparent);
background-image: linear-gradient(80deg, transparent, rgba(255, 255, 255, 0.4) 70%, transparent);
box-shadow: inset 0 -4px 6px -2px rgba(0, 0, 0, 0.1), 4px 0 6px -2px rgba(0, 0, 0, 0.1);
}
.present__ribbon--horizontal {
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 5vw;
background-image: -webkit-linear-gradient(10deg, transparent, rgba(255, 255, 255, 0.6) 60%, transparent);
background-image: linear-gradient(80deg, transparent, rgba(255, 255, 255, 0.6) 60%, transparent);
box-shadow: 0 0 8px -2px rgba(0, 0, 0, 0.1);
}
.present__top {
background-color: #FE4365;
background-image: -webkit-repeating-linear-gradient(135deg, #fe2f54, #fe2f54 1px, #FE4365 1px, #FE4365 4px);
background-image: repeating-linear-gradient(-45deg, #fe2f54, #fe2f54 1px, #FE4365 1px, #FE4365 4px);
position: absolute;
top: 0;
left: -1%;
width: 102%;
height: 20%;
border-radius: 0.5vw 0.5vw 0 0;
box-shadow: inset -6px -6px 36px rgba(0, 0, 0, 0.1);
}
.present__bow {
position: absolute;
right: 0;
bottom: 100%;
left: 0;
margin: auto;
width: 30%;
height: 40%;
background-color: #83AF9B;
border-radius: 2px 2px 0 0;
box-shadow: inset -6px -6px 6px rgba(0, 0, 0, 0.1);
}
.present__bow:before,
.present__bow:after {
content: "";
position: absolute;
bottom: 100%;
width: 70%;
height: 150%;
background-color: inherit;
border-radius: 2px;
z-index: -1;
}
.present__bow:before {
left: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
box-shadow: inset 6px 6px 6px rgba(0, 0, 0, 0.1);
}
.present__bow:after {
right: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-shadow: inset -6px -6px 6px rgba(0, 0, 0, 0.1);
}
.santa {
position: absolute;
right: 0;
bottom: 90%;
left: 0;
margin: auto;
width: 60%;
background-color: #E1B899;
border-radius: 100%;
}
.santa:after {
content: "";
display: block;
padding-bottom: 100%;
}
.santa__eyes {
position: absolute;
top: 35%;
width: 100%;
height: 100%;
}
.santa__eyes:before,
.santa__eyes:after {
content: "";
position: absolute;
width: 1.4vw;
height: 1.4vw;
background-color: #111111;
border-radius: 100%;
}
.santa__eyes:before {
left: 30%;
}
.santa__eyes:after {
right: 30%;
}
.santa__beard {
position: absolute;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100%;
height: 50%;
background-color: white;
border-radius: 0 0 4vw 4vw;
}
.santa__beard:before,
.santa__beard:after {
content: "";
position: absolute;
bottom: 100%;
width: 15%;
height: 25%;
background-color: inherit;
}
.santa__beard:before {
left: 0;
border-radius: 0 4vw 0 0;
}
.santa__beard:after {
right: 0;
border-radius: 4vw 0 0 0;
}
.santa__beard--cover {
position: absolute;
top: 0;
right: 0;
left: 0;
margin: auto;
width: 70%;
height: 50%;
background-color: #E1B899;
border-radius: 0 0 2vw 2vw;
}
.santa__beard--cover:before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
margin: auto;
width: 50%;
height: 100%;
background-color: white;
border-radius: 1vw 1vw 0 0;
}
.santa__smile {
position: absolute;
right: 0;
bottom: 30%;
left: 0;
margin: auto;
width: 15%;
height: 20%;
background-color: #111111;
border-radius: 4vw;
}
.santa__smile:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
background-color: white;
}
.present {
-webkit-animation: shake 5s ease-in-out infinite;
animation: shake 5s ease-in-out infinite;
}
.present__top {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform 0.2s ease-in;
transition: -webkit-transform 0.2s ease-in;
transition: transform 0.2s ease-in;
transition: transform 0.2s ease-in, -webkit-transform 0.2s ease-in;
}
.santa {
-webkit-transform: translateY(17vw);
transform: translateY(17vw);
-webkit-transition: -webkit-transform 0.2s ease-in;
transition: -webkit-transform 0.2s ease-in;
transition: transform 0.2s ease-in;
transition: transform 0.2s ease-in, -webkit-transform 0.2s ease-in;
}
.present:hover {
-webkit-animation: none;
animation: none;
}
.present:hover .santa {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: -webkit-transform 0.1s ease-out;
transition: -webkit-transform 0.1s ease-out;
transition: transform 0.1s ease-out;
transition: transform 0.1s ease-out, -webkit-transform 0.1s ease-out;
}
.present:hover .present__top {
-webkit-transform: translateY(-17vw);
transform: translateY(-17vw);
-webkit-animation: pop-the-top 0.4s ease-in;
animation: pop-the-top 0.4s ease-in;
}
@-webkit-keyframes pop-the-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
30% {
-webkit-transform: translateY(-24vw);
transform: translateY(-24vw);
}
60% {
-webkit-transform: translateY(-16vw);
transform: translateY(-16vw);
}
75% {
-webkit-transform: translateY(-18vw);
transform: translateY(-18vw);
}
90%,
100% {
-webkit-transform: translateY(-17vw);
transform: translateY(-17vw);
}
}
@keyframes pop-the-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
30% {
-webkit-transform: translateY(-24vw);
transform: translateY(-24vw);
}
60% {
-webkit-transform: translateY(-16vw);
transform: translateY(-16vw);
}
75% {
-webkit-transform: translateY(-18vw);
transform: translateY(-18vw);
}
90%,
100% {
-webkit-transform: translateY(-17vw);
transform: translateY(-17vw);
}
}
@-w
