Scribd
Upload
15 views20 pages

Santa Animation CSS Code Example

The document describes the CSS and HTML used to create an animated laughing Santa Claus. Key elements include a circular window container, Santa's body that bounces up and down, a head that bounces, facial features like eyes and a beard that move, and text displaying a holiday message. Animations are defined using CSS keyframes to move elements over time creating a laughing effect.

Uploaded by

Thế Anh
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
15 views20 pages

Santa Animation CSS Code Example

The document describes the CSS and HTML used to create an animated laughing Santa Claus. Key elements include a circular window container, Santa's body that bounces up and down, a head that bounces, facial features like eyes and a beard that move, and text displaying a holiday message. Animations are defined using CSS keyframes to move elements over time creating a laughing effect.

Uploaded by

Thế Anh
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<!

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%);
}

.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;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
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%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-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%;
-webkit-animation: beardLaugh 4s linear infinite;
-moz-animation: beardLaugh 4s linear infinite;
-ms-animation: beardLaugh 4s linear infinite;
-o-animation: beardLaugh 4s linear infinite;
animation: beardLaugh 4s linear infinite;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
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%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-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;
-webkit-animation: mouthLaugh 4s linear infinite;
-moz-animation: mouthLaugh 4s linear infinite;
-ms-animation: mouthLaugh 4s linear infinite;
-o-animation: mouthLaugh 4s linear infinite;
animation: mouthLaugh 4s linear infinite;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
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;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: rotate(-10deg);
}

.santa .head .ears:after {


right: -8px;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
}

@font-face {
font-family: 'Mountains of Christmas';
font-style: normal;
src: local("Mountains of Christmas"), local("MountainsofChristmas-
Regular"),
url([Link]
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>

<body id="body" style="display:flex; align-items: center;justify-content:


center;height: 100vh;">

<div id="btn" style="width:30%;">


<svg xmlns="[Link]
xmlns:xlink="[Link] version="1.1" x="0px" y="0px" viewBox="0
0 150 88.4" enable-background="new 0 0 150 88.4" xml:space="preserve" style="fill:
rgb(0, 0, 0);" role="img" aria-label="Valentine Envelope Line Icon">
<path d="M60.1,38.6c3.4-3.4,9-3.4,12.4,0l1.2,1.1l1.2-1.1c3.4-3.4,9-
3.4,12.4,0c0.4,0.4,0.7,0.7,1,1.1L140,4.8H10.1 L60.1,38.6L60.1,38.6z" style="fill:
none;"></path>
<path d="M89.8,44.8c0,2.3-0.9,4.6-2.6,6.2L75.4,62.9c-0.5,0.5-1.1,0.7-
1.7,0.7s-1.2-0.2-1.7-0.7L60.1,51 c-1.7-1.7-2.6-3.9-2.6-6.2c0-0.7,0.1-1.3,0.2-
2L4.8,7.2v75.4c0,0.6,0.5,1,1,1h138.3c0.6,0,1-0.5,1-1V7.2L89.8,44.5
C89.8,44.6,89.8,44.7,89.8,44.8z" style="fill: none;"></path>
<g id="__id2_s23t51u2c"><path d="M148.8,2.3c0-0.1-0.1-0.2-0.2-0.3c-0.3-
0.3-0.6-0.6-0.9-0.8c-0.4-0.2-0.8-0.3-1.2-0.3c0.4,0,0.9,0.1,1.2,0.3 c-1-0.8-2.2-
1.2-3.6-
1.2H5.9C4.5,0,3.3,0.5,2.3,1.2C2.1,1.3,1.9,1.5,1.8,1.7C1.7,1.8,1.5,1.9,1.4,2C0.5,3.1
,0,4.4,0,5.9v76.7 c0,3.2,2.6,5.9,5.9,5.9h138.3c3.2,0,5.9-2.6,5.9-
5.9V5.9C150,4.5,149.5,3.3,148.8,2.3z M147.9,5.4l-2.7,1.8v75.4c0,0.6-0.5,1-1,1
H5.9c-0.6,0-1-0.5-1-1V7.2L2.1,5.3l2.7,1.8V5.9c0-0.6,0.5-1,1-1h0.1c-0.6,0-1,0.5-
1,1v1.3l52.9,35.6c0.3-1.6,1.1-3.1,2.3-4.2 l-50-
33.7H10L4.8,1.3L10,4.8h130L88.2,39.7c1,1.4,1.5,3,1.6,4.8l55.3-37.3V5.9c0.1-0.6-0.4-
1.1-1-1.1h0.1c0.6,0,1,0.5,1,1v1.3 L147.9,5.4c0.7-0.5,1-1.3,1.1-
2C149,4.2,148.6,5,147.9,5.4z" style="fill: rgb(169, 216, 221);"></path></g>
<g id="__id3_s23t51u2c"><path d="M90.2,43.7c-0.1-1.8-0.6-3.4-1.6-4.9c-
0.3-0.4-0.6-0.8-1-1.2c-3.5-3.5-9.2-3.5-12.7,0l-1.2,1.2l-1.2-1.2 c-3.5-3.5-9.2-3.5-
12.7,0c0,0,0,0,0,0c-1.2,1.2-2,2.7-2.4,4.4c-0.1,0.6-0.2,1.3-
0.2,2c0,2.4,0.9,4.7,2.6,6.4L72,62.5 c0.5,0.5,1.1,0.7,1.8,0.7c0.6,0,1.3-0.2,1.8-
0.7l12.1-12.1c1.7-1.7,2.6-4,2.6-6.4C90.3,43.9,90.2,43.8,90.2,43.7z M73.7,57.3
L63.3,46.9c-0.4-0.4-0.7-0.9-0.9-1.5c-0.2-0.4-0.2-0.9-0.2-1.4c0-1.1,0.4-2.1,1.2-
2.9c0.2-0.2,0.5-0.4,0.8-0.6 c0.6-0.4,1.3-0.6,2.1-
0.6c1.1,0,2.1,0.4,2.9,1.2l2.9,2.9c1,1,2.5,1,3.5,0l2.9-2.9c1.6-1.6,4.1-
1.6,5.7,0c0.1,0.1,0.2,0.3,0.4,0.4 c1.2,1.6,1.1,3.8-0.4,5.3l-2.9,2.9L73.7,57.3z"
style="fill: rgb(207, 94, 116);"></path></g>
</svg>
<h1 style="text-align: center;color:#de2f32">Nhấn vào thư nhé !!!</h1>
</div>

<div class="christmas" >


<div class="message">
<h1>Merry Christmas!</h1>
<h2>From CyberSoft with LOVE♥</h2>
</div>
<div class="window ">
<div class="santa">
<div class="head">
<div class="face">
<div class="redhat">
<div class="whitepart"></div>
<div class="redpart"></div>
<div class="hatball"></div>
</div>
<div class="eyes"></div>
<div class="beard">
<div class="nouse"></div>
<div class="mouth"></div>
</div>
</div>
<div class="ears"></div>
</div>
<div class="body"></div>
</div>
</div>

</div>
<script>
[Link]("#btn").onclick = function (){
[Link]("#btn").[Link]='none';
[Link](".christmas").[Link]='block';
[Link]("#body").[Link]="#de2f32";
}
</script>
</body>

</html>

You might also like