Bản mẫu:Đức Anh/Merry Christmas/style.css

body {
background: #de2f32; }
.window {
width: 340px;
height: 340px;
background: #a0d5d3;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
margin-top: -60px;
transform: translate(-50%, -50%);
border: 10px solid #f8e7dc;
overflow: hidden; }
.santa {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%); }
.santa .body {
width: 190px;
height: 210px;
background: #de2f32;
position: relative;
border-radius: 50%;
top: 0;
animation: bodyLaugh 4s linear infinite;
transform: translateY(50%); }
.santa .body:before {
content: " ";
width: 7px;
height: 7px;
background: #f7be10;
border-radius: 50%;
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px -18px 0px #f7be10, 0px 18px 0px #f7be10; }
.santa .head {
z-index: 2;
position: absolute;
bottom: 90px;
left: 50%;
animation: headLaugh 4s linear infinite;
transform: translateX(-50%); }
.santa .head .face {
width: 120px;
height: 130px;
background: #edcab0;
background: radial-gradient(#edcab0, #e9a982);
border-radius: 50%;
border: 3px solid #f8e7dc; }
.santa .head .face .redhat .whitepart {
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 90%;
height: 32px;
background: #f8e7dc;
border-radius: 50px;
z-index: 4;
box-shadow: 0px 6px 0px -4px rgba(0, 0, 0, 0.1); }
.santa .head .face .redhat .redpart {
width: 120px;
height: 120px;
background: #de2f32;
position: absolute;
top: -50px;
left: 15px;
border-radius: 50%;
z-index: -1; }
.santa .head .face .redhat .redpart:before {
content: " ";
width: 95px;
height: 95px;
position: absolute;
left: 0;
top: 12px;
border-radius: 50%;
box-shadow: inset -8px -1px 0px -5px rgba(0, 0, 0, 0.05); }
.santa .head .face .redhat .redpart:after {
content: " ";
position: absolute;
right: 0;
top: 60px;
background: #de2f32;
width: 20px;
height: 50px; }
.santa .head .face .redhat .hatball {
width: 38px;
height: 38px;
background: #f8e7dc;
border-radius: 50%;
z-index: 5;
position: absolute;
right: -20px;
top: 40px;
box-shadow: 0px 6px 0px -4px rgba(0, 0, 0, 0.1); }
.santa .head .face .eyes {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 57px; }
.santa .head .face .eyes:before, .santa .head .face .eyes:after {
content: " ";
position: absolute;
width: 15px;
height: 9px;
top: 0;
border: 5px solid #a8744f;
border-width: 0;
border-top-width: 5px;
border-radius: 50%; }
.santa .head .face .eyes:before {
left: -28px; }
.santa .head .face .eyes:after {
right: -28px; }
.santa .head .face .beard {
width: 55px;
height: 55px;
background: #f8e7dc;
border-radius: 50%;
position: absolute;
bottom: -30px;
left: 50%;
animation: beardLaugh 4s linear infinite;
transform: translateX(-50%); }
.santa .head .face .beard:before, .santa .head .face .beard:after {
content: " ";
width: 80px;
height: 80px;
background: #f8e7dc;
border-radius: 50%;
position: absolute;
bottom: 15px; }
.santa .head .face .beard:before {
left: -40px; }
.santa .head .face .beard:after {
right: -40px; }
.santa .head .face .beard .nouse {
width: 25px;
height: 20px;
border-radius: 50%;
background: #edcab0;
position: absolute;
z-index: 3;
box-shadow: inset -3px -3px 0px #e9a982;
left: 50%;
transform: translateX(-50%);
top: -42px; }
.santa .head .face .beard .mouth {
background: #a8744f;
z-index: 3;
position: absolute;
width: 15px;
height: 5px;
border-bottom-right-radius: 80px 50px;
border-bottom-left-radius: 80px 50px;
left: 50%;
top: 0;
animation: mouthLaugh 4s linear infinite;
transform: translateX(-50%); }
.santa .head .ears:before, .santa .head .ears:after {
content: " ";
width: 20px;
height: 30px;
border-radius: 50%;
background: radial-gradient(#e9a982, #edcab0);
position: absolute;
top: 50%;
z-index: -1; }
.santa .head .ears:before {
left: -8px;
transform: rotate(-10deg); }
.santa .head .ears:after {
right: -8px;
transform: rotate(10deg); }
.message {
position: absolute;
left: 50%;
top: 50%;
margin-top: 80px;
transform: translateX(-50%);
color: #f8e7dc;
font-family: 'Mountains of Christmas'; }
.message h1 {
font-style: normal;
font-size: 75px;
margin-bottom: 0;
white-space: nowrap; }
.message h2 {
margin: 0;
font-size: 20px;
text-align: center;
white-space: nowrap; }
.message h2 a {
color: #f7be10;
opacity: 0.8; }
.message h2 a:hover {
opacity: 1; }
@keyframes beardLaugh {
0% {
bottom: -28px; }
2% {
bottom: -30px; }
4% {
bottom: -28px; }
8% {
bottom: -30px; }
10% {
bottom: -28px; }
12% {
bottom: -30px; }
14% {
bottom: -28px; }
18% {
bottom: -30px; }
20% {
bottom: -28px; }
22% {
bottom: -30px; }
24% {
bottom: -28px; }
28% {
bottom: -30px; }
30% {
bottom: -28px; }
100% {
bottom: -28px; } }
@keyframes headLaugh {
0% {
bottom: 83px; }
45% {
bottom: 83px; }
50% {
bottom: 90px; }
92% {
bottom: 90px; }
98% {
bottom: 83px; }
100% {
bottom: 83px; } }