Professional Documents
Culture Documents
Code Noel
Code Noel
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
::selection {
background: rgba(255, 255, 0, 0.5);
}
body {
background: white;
}
.window {
width: 340px;
height: 340px;
background: #a0d5d3;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
margin-top: -60px;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border: 10px solid #f8e7dc;
overflow: hidden;
}
.santa {
position: absolute;
left: 50%;
bottom: 0;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.santa .body {
width: 190px;
height: 210px;
background: #de2f32;
position: relative;
border-radius: 50%;
top: 0;
-webkit-animation: bodyLaugh 4s linear infinite;
-moz-animation: bodyLaugh 4s linear infinite;
-ms-animation: bodyLaugh 4s linear infinite;
-o-animation: bodyLaugh 4s linear infinite;
animation: bodyLaugh 4s linear infinite;
-webkit-transform: translateY(50%);
-moz-transform: translateY(50%);
-ms-transform: translateY(50%);
-o-transform: translateY(50%);
transform: translateY(50%);
}
.santa .body:before {
content: " ";
width: 7px;
height: 7px;
background: #f7be10;
border-radius: 50%;
position: absolute;
top: 35%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -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%;
-webkit-animation: headLaugh 4s linear infinite;
-moz-animation: headLaugh 4s linear infinite;
-ms-animation: headLaugh 4s linear infinite;
-o-animation: headLaugh 4s linear infinite;
animation: headLaugh 4s linear infinite;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
@font-face {
font-family: 'Mountains of Christmas';
font-style: normal;
src: local("Mountains of Christmas"), local("MountainsofChristmas-
Regular"),
url(https://fonts.gstatic.com/s/mountainsofchristmas/v8/dVGBFPwd6G44IWDbQtPewylJhLD
HyIrT3I5b5eGTHmw.woff2) format("woff2");
}
.message {
position: absolute;
left: 50%;
top: 50%;
margin-top: 80px;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
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;
}
@-webkit-keyframes bodyLaugh {
0% {
top: 0px;
}
2% {
top: -3px;
}
4% {
top: 0px;
}
8% {
top: -3px;
}
10% {
top: 0px;
}
12% {
top: -3px;
}
14% {
top: 0px;
}
18% {
top: -3px;
}
20% {
top: 0px;
}
22% {
top: -3px;
}
24% {
top: 0px;
}
28% {
top: -3px;
}
30% {
top: 0px;
}
100% {
top: 0px;
}
}
@-moz-keyframes bodyLaugh {
0% {
top: 0px;
}
2% {
top: -3px;
}
4% {
top: 0px;
}
8% {
top: -3px;
}
10% {
top: 0px;
}
12% {
top: -3px;
}
14% {
top: 0px;
}
18% {
top: -3px;
}
20% {
top: 0px;
}
22% {
top: -3px;
}
24% {
top: 0px;
}
28% {
top: -3px;
}
30% {
top: 0px;
}
100% {
top: 0px;
}
}
@-ms-keyframes bodyLaugh {
0% {
top: 0px;
}
2% {
top: -3px;
}
4% {
top: 0px;
}
8% {
top: -3px;
}
10% {
top: 0px;
}
12% {
top: -3px;
}
14% {
top: 0px;
}
18% {
top: -3px;
}
20% {
top: 0px;
}
22% {
top: -3px;
}
24% {
top: 0px;
}
28% {
top: -3px;
}
30% {
top: 0px;
}
100% {
top: 0px;
}
}
@keyframes bodyLaugh {
0% {
top: 0px;
}
2% {
top: -3px;
}
4% {
top: 0px;
}
8% {
top: -3px;
}
10% {
top: 0px;
}
12% {
top: -3px;
}
14% {
top: 0px;
}
18% {
top: -3px;
}
20% {
top: 0px;
}
22% {
top: -3px;
}
24% {
top: 0px;
}
28% {
top: -3px;
}
30% {
top: 0px;
}
100% {
top: 0px;
}
}
@-webkit-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;
}
}
@-moz-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;
}
}
@-ms-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 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;
}
}
@-webkit-keyframes headLaugh {
0% {
bottom: 83px;
}
45% {
bottom: 83px;
}
50% {
bottom: 90px;
}
92% {
bottom: 90px;
}
98% {
bottom: 83px;
}
100% {
bottom: 83px;
}
}
@-moz-keyframes headLaugh {
0% {
bottom: 83px;
}
45% {
bottom: 83px;
}
50% {
bottom: 90px;
}
92% {
bottom: 90px;
}
98% {
bottom: 83px;
}
100% {
bottom: 83px;
}
}
@-ms-keyframes headLaugh {
0% {
bottom: 83px;
}
45% {
bottom: 83px;
}
50% {
bottom: 90px;
}
92% {
bottom: 90px;
}
98% {
bottom: 83px;
}
100% {
bottom: 83px;
}
}
@keyframes headLaugh {
0% {
bottom: 83px;
}
45% {
bottom: 83px;
}
50% {
bottom: 90px;
}
92% {
bottom: 90px;
}
98% {
bottom: 83px;
}
100% {
bottom: 83px;
}
}
@-webkit-keyframes mouthLaugh {
0% {
width: 20px;
}
45% {
width: 20px;
}
50% {
width: 15px;
}
92% {
width: 15px;
}
98% {
width: 20px;
}
100% {
width: 20px;
}
}
@-moz-keyframes mouthLaugh {
0% {
width: 20px;
}
45% {
width: 20px;
}
50% {
width: 15px;
}
92% {
width: 15px;
}
98% {
width: 20px;
}
100% {
width: 20px;
}
}
@-ms-keyframes mouthLaugh {
0% {
width: 20px;
}
45% {
width: 20px;
}
50% {
width: 15px;
}
92% {
width: 15px;
}
98% {
width: 20px;
}
100% {
width: 20px;
}
}
@keyframes mouthLaugh {
0% {
width: 20px;
}
45% {
width: 20px;
}
50% {
width: 15px;
}
92% {
width: 15px;
}
98% {
width: 20px;
}
100% {
width: 20px;
}
}
/* abc */
.christmas{
display: none;
}
.christmas:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(-10deg);
background-image: radial-gradient(circle at 30% 30%, #fff 1.5%, transparent
2.5%), radial-gradient(circle at 80% 70%, #fff 1.5%, transparent 2.5%), radial-
gradient(circle at 30% 50%, #fff 1%, transparent 2%), radial-gradient(circle at 70%
85%, #fff 1%, transparent 2%);
background-size: 10% 30%;
background-position: 0 0, 0 0, 0 0, 0 0;
-webkit-animation: snow 3s linear infinite ;
animation: snow 3s linear infinite ;
}
@-webkit-keyframes snow {
100% {
background-position: 0px 200px, 0 200px, 0px 200px, 0px 200px;
}
}
@keyframes snow {
100% {
background-position: 0px 200px, 0 200px, 0px 200px, 0px 200px;
}
}
</style>
</div>
<script>
document.querySelector("#btn").onclick = function (){
document.querySelector("#btn").style.display='none';
document.querySelector(".christmas").style.display='block';
document.querySelector("#body").style.background="#de2f32";
}
</script>
</body>
</html>