Loading
.
.
.
We use cookies to personalize ads and analyze traffic. By continuing to browse the site, you agree to our Privacy Policy. You can also choose to reject cookies.
The content on this website, including videos and code examples, is for educational purposes only. All demonstrations and designs are fictional and created to illustrate coding techniques. Any resemblance to existing websites or brands is purely coincidental.
The creators and administrators of this website do not claim ownership or affiliation with any existing websites or companies. Users are encouraged to use the information responsibly for learning purposes. Liability for any misuse of the content provided is not accepted.
Below is the html code for this video.
index.html
<!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>Merry Christmas</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="title-container">
<h1>Merry Christmas</h1>
</div>
<div class="ground"></div>
<div class="snow-globe">
<div class="sg-bg"></div>
<div class="ground-snow">
<div class="snow-surface"></div>
</div>
<div class="tree">
<div class="tree-shadow"></div>
<div class="branch-bottom">
<div class="branch-bottom-snow"></div>
<div class="branch-shadow"></div>
</div>
<div class="branch-middle">
<div class="branch-middle-snow"></div>
<div class="branch-shadow"></div>
</div>
<div class="branch-top">
<div class="branch-top-snow"></div>
</div>
<div class="star"></div>
<div class="bulb"></div>
</div>
<div class="sm-shadow"></div>
<div class="snowman">
<div class="snowman-bottom"></div>
<div class="snowman-top"></div>
<div class="coal"></div>
<div class="carrot"></div>
</div>
<div class="falling-snow-wrap">
<div class="falling-snow">
<div class="flakes1">
<p>*</p>
</div>
<div class="flakes2">
<p>*</p>
</div>
</div>
</div>
<div class="sg-fg"></div>
<div class="stand-curved-wrap">
<div class="stand-curved"></div>
</div>
</div>
<div class="gift-container">
<div class="gift">
<div class="gift-bow">
<div class="gift-bow-left"></div>
<div class="gift-bow-right"></div>
<div class="gift-bow-center"></div>
</div>
<div class="gift-box">
<div class="gift-lid-shadow"></div>
</div>
<div class="gift-lid"></div>
<div class="gift-star gift-star-1"></div>
<div class="gift-star gift-star-2"></div>
<div class="gift-star gift-star-3"></div>
<div class="gift-star gift-star-4"></div>
<div class="gift-star gift-star-5"></div>
</div>
</div>
</body>
</html>Below is the css code for this video.
style.css
@import url('https://fonts.googleapis.com/css2?family=Henny+Penny&display=swap');
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 100%;
background: #476ce8;
margin: 10px 0 0;
overflow: hidden;
}
ul {
position: absolute;
width: 100%;
display: flex;
margin: 5px 0 0;
padding: 0 0 0 8px;
border-top: 2px solid #808080;
}
ul li {
position: relative;
top: -35px;
left: -10px;
height: 40px;
width: 40px;
background-color: #ffffff0d;
border-radius: 50%;
margin: 25px 10px;
list-style-type: none;
}
ul li::before {
content: "";
position: absolute;
top: 10px;
left: 10px;
height: 20px;
width: 20px;
background: #404040;
border-radius: 50%;
}
ul li::after {
content: "";
position: absolute;
top: -24px;
left: 12px;
height: 26px;
width: 74px;
border-bottom: 2px solid #404040;
border-radius: 50%;
}
ul li:last-child::after {
border-bottom: none;
}
ul li:nth-child(3n + 1)::before {
background: #404040;
animation: bulbAnim1 3s linear infinite;
animation-delay: 0.5s;
}
@keyframes bulbAnim1 {
0%, 100% {
background: #B33F4040;
}
50% {
background: #B33F40;
box-shadow: 0 0 25px #B33F40, 0 0 45px #B33F40;
}
}
ul li:nth-child(3n + 2)::before {
background: #404040;
animation: bulbAnim2 3s linear infinite;
animation-delay: 1s;
}
@keyframes bulbAnim2 {
0%, 100% {
background: #93E9BE40;
}
50% {
background: #93E9BE;
box-shadow: 0 0 25px #93E9BE, 0 0 45px #93E9BE;
}
}
ul li:nth-child(3n + 3)::before {
background: #404040;
animation: bulbAnim3 3s linear infinite;
animation-delay: 1.5s;
}
@keyframes bulbAnim3 {
0%, 100% {
background: #f9c70c40;
}
50% {
background: #f9c70c;
box-shadow: 0 0 25px #f9c70c, 0 0 45px #f9c70c;
}
}
.title-container {
position: absolute;
top: 62.5%;
transform: translateY(-62.5%);
height: auto;
width: 33%;
}
.title-container h1 {
font-family: 'henny penny', cursive;
font-size: 84px;
width: 100%;
background: repeating-linear-gradient(-45deg, #ff0000, #ff0000 30px, #ffffff 30px, #ffffff 60px);
background-clip: text;
color: transparent;
-webkit-background-clip: text;
padding-left: 25px;
text-align: center;
letter-spacing: 5px;
animation: titleBgAnim 15s linear infinite;
}
@keyframes titleBgAnim {
from {
background-position: 0px;
}
to {
background-position: -1000px;
}
}
.snow-globe {
position: relative;
top: 15vh;
height: 400px;
width: 400px;
margin: auto;
}
.branch-top, .branch-middle, .branch-bottom {
position: absolute;
background-color: #165b33;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.branch-top {
top: 5px;
left: 30px;
height: 75px;
width: 40px;
}
.branch-top-snow, .branch-middle-snow, .branch-bottom-snow {
position: absolute;
height: 100%;
width: 100%;
background: linear-gradient(135deg, #146b3a 25%, transparent 25%) -16px 0, linear-gradient(225deg, #146b3a 25%, transparent 25%) -16px 0,
linear-gradient(315deg, #146b3a 25%, transparent 25%), linear-gradient(45deg, #146b3a 25%, transparent 25%);
background-size: 32px 32px;
}
.branch-middle {
top: 35px;
left: 12.5px;
height: 115px;
width: 75px;
}
.branch-bottom {
top: 80px;
height: 125px;
width: 100px;
}
.branch-shadow {
position: absolute;
height: 100%;
width: 100%;
background: linear-gradient(to bottom, #165b33, #ffffff00);
mix-blend-mode: multiply;
}
.tree {
position: relative;
top: 60px;
left: 200px;
height: 205px;
width: 100px;
}
.sg-bg {
position: absolute;
top: 0;
height: 400px;
width: 400px;
background: #ffffff80;
border-radius: 50%;
}
.sg-fg {
position: absolute;
top: 0;
height: 400px;
width: 400px;
background: linear-gradient(135deg, #ffffffbf 0%, rgba(246, 246, 246, 0.25) 47%, rgba(237, 237, 237, 0) 100%);
border-radius: 50%;
}
.ground-snow {
position: absolute;
top: 10px;
left: 10px;
height: 380px;
width: 380px;
background: linear-gradient(to bottom, #ffffff00 68%, #f0f0f0 68%, #ebeff5 79%, #c5d3e8 100%);
border-radius: 50%;
}
.snow-surface {
position: relative;
top: 236px;
height: 40px;
width: 356px;
background: #ffffff;
border-radius: 50%;
margin: auto;
}
.star {
position: absolute;
top: 0;
left: 30px;
height: 0;
width: 0;
transform: rotate(35deg);
border-right: 20px solid transparent;
border-bottom: 14px solid #f8b229;
border-left: 20px solid transparent;
}
.star::before {
content: "";
position: absolute;
top: -9px;
left: -13px;
height: 0;
width: 0;
transform: rotate(-35deg);
border-bottom: 16px solid #f8b229;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
}
.star::after {
content: "";
position: absolute;
top: 0.6px;
left: -21px;
height: 0;
width: 0;
transform: rotate(-70deg);
border-right: 20px solid transparent;
border-bottom: 14px solid #f8b229;
border-left: 20px solid transparent;
}
.falling-snow-wrap {
position: absolute;
top: 0;
height: 260px;
width: 400px;
opacity: 0.9;
overflow: hidden;
}
.falling-snow {
position: absolute;
top: 10px;
left: 10px;
height: 380px;
width: 380px;
border-radius: 50%;
opacity: 0.9;
overflow: hidden;
}
.flakes1 {
position: absolute;
top: 0;
height: 800px;
width: 400px;
color: #ffffff;
text-shadow: 303px 117px, 32px 89px, 323px 119px, 98px 183px, 126px 235px, 0px 171px, 380px 61px, 269px 17px, 0px 151px, 121px 344px,
229px 136px, 237px 280px, 303px 30px, 211px 314px, 378px 285px, 10px 287px, 93px 345px, 292px 324px, 223px 292px, 156px 160px,
253px 58px, 205px 195px, 145px 106px, 79px 312px, 182px 359px, 279px 99px, 349px 124px, 5px 33px, 216px 147px, 388px 117px,
70px 295px, 149px 318px, 96px 66px, 129px 217px, 138px 218px, 241px 310px, 231px 368px, 18px 327px, 173px 213px, 118px 10px,
246px 208px, 159px 244px, 268px 376px, 167px 262px, 85px 238px, 277px 47px, 386px 192px, 259px 364px, 325px 327px, 279px 201px,
303px 517px, 32px 489px, 323px 519px, 98px 583px, 126px 635px, 0px 571px, 380px 461px, 269px 417px, 0px 551px, 121px 744px,
229px 536px, 237px 680px, 303px 430px, 211px 714px, 378px 685px, 10px 687px, 93px 745px, 292px 724px, 223px 692px, 156px 560px,
253px 458px, 205px 595px, 145px 506px, 79px 712px, 182px 759px, 279px 499px, 349px 524px, 5px 433px, 216px 547px, 388px 517px,
70px 695px, 149px 718px, 96px 466px, 129px 617px, 138px 618px, 241px 710px, 231px 768px, 18px 727px, 173px 613px, 118px 410px,
246px 608px, 159px 644px, 268px 776px, 167px 662px, 85px 638px, 277px 447px, 386px 592px, 259px 764px, 325px 727px, 279px 601px;
opacity: 0.5;
animation: snowFlakesAnim 30s linear infinite;
}
.flakes2 {
position: absolute;
top: 0;
height: 800px;
width: 400px;
color: #ffffff;
text-shadow: 375px 485px, 11px 689px, 254px 784px, 5px 686px, 266px 705px, 388px 698px, 180px 707px, 36px 413px, 74px 695px, 238px 690px,
384px 635px, 1px 694px, 45px 538px, 131px 750px, 258px 520px, 157px 705px, 96px 749px, 325px 719px, 132px 688px, 167px 511px,
303px 408px, 340px 620px, 394px 428px, 187px 748px, 217px 624px, 356px 630px, 33px 758px, 238px 762px, 357px 586px, 253px 798px,
68px 786px, 164px 662px, 119px 598px, 221px 557px, 126px 537px, 282px 503px, 11px 455px, 219px 632px, 60px 597px, 41px 529px,
247px 451px, 217px 644px, 304px 400px, 214px 421px, 287px 757px, 76px 404px, 376px 735px, 169px 572px, 245px 790px, 66px 717px,
375px 85px, 11px 289px, 254px 384px, 5px 286px, 266px 305px, 388px 298px, 180px 307px, 36px 13px, 74px 295px, 238px 290px,
384px 235px, 1px 294px, 45px 138px, 131px 350px, 258px 120px, 157px 305px, 96px 349px, 325px 319px, 132px 288px, 167px 111px,
303px 8px, 340px 220px, 394px 28px, 187px 348px, 217px 224px, 356px 230px, 33px 358px, 238px 362px, 357px 186px, 253px 398px,
68px 386px, 164px 262px, 119px 198px, 221px 157px, 126px 137px, 282px 103px, 11px 55px, 219px 232px, 60px 197px, 41px 129px,
247px 51px, 217px 244px, 304px 0px, 214px 21px, 287px 357px, 76px 4px, 376px 335px, 169px 172px, 245px 390px, 66px 317px;
animation: snowFlakesAnim 15s linear infinite;
}
@keyframes snowFlakesAnim {
0% {
transform: translate(0px, -400px);
}
100% {
transform: translate(0, 0);
}
}
.bulb {
position: absolute;
top: 40px;
left: 40px;
height: 16px;
width: 16px;
background-color: #bb2528;
border-radius: 50%;
box-shadow: 8px 44px 0 0 #bb2528, -8px 80px 0 0 #bb2528, 20px 100px 0 0 #bb2528, -24px 132px 0 0 #bb2528, 32px 140px 0 0 #bb2528;
}
.tree-shadow {
position: absolute;
left: -35px;
bottom: -10px;
height: 20px;
background: radial-gradient(ellipse at center, #146b3a, rgba(138, 174, 188, 0) 65%, rgba(206, 223, 235, 0) 100%);
width: 200px;
}
.stand-curved {
position: absolute;
left: -70px;
bottom: 0;
height: 180px;
width: 500px;
border: 100px solid #e32736;
border-radius: 50%;
}
.stand-curved-wrap {
position: relative;
bottom: -136px;
height: 133.33px;
width: 560px;
margin-left: -80px;
clip-path: polygon(30% 10%, 70% 10%, 80% 100%, 20% 100%);
}
.ground {
position: absolute;
top: 75vh;
height: 150px;
width: 100%;
background: radial-gradient(ellipse at center, #010101 0%, rgba(1, 1, 1, 0.75) 10%, rgba(1, 1, 1, 0) 20%),
linear-gradient(to bottom, #2b32ac, #476ce8);
}
.sm-shadow {
position: absolute;
left: 90px;
bottom: 125px;
height: 20px;
width: 100px;
background: radial-gradient(ellipse at center, rgba(13, 84, 102, 0.5) 0%, rgba(138, 174, 188, 0) 65%, rgba(206, 223, 235, 0) 100%);
}
.snowman-bottom {
position: absolute;
left: 100px;
bottom: 132px;
height: 60px;
width: 60px;
background: linear-gradient(to bottom, #ffffff, #dbe8fc);
border-radius: 50%;
}
.snowman-top {
position: absolute;
left: 108px;
bottom: 184px;
height: 40px;
width: 40px;
background: linear-gradient(to bottom, #ffffff, #dbe8fc);
border-radius: 50%;
}
.coal {
position: absolute;
height: 5px;
width: 5px;
border-radius: 50%;
box-shadow: 120px -10px 0 0 #000000, 137px -12px 0 0 #000000, 130px 15px 0 0 #000000, 132px 27px 0 0 #000000, 132px 39px 0 0 #000000;
}
.carrot {
position: absolute;
top: 198px;
left: 130px;
height: 0;
width: 0;
border-left: 20px solid #ed9121;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
}
.gift-container {
position: absolute;
top: 60%;
right: 0;
transform: translateY(-60%);
width: 27.5%;
}
.gift {
position: relative;
height: 18em;
width: 18em;
}
.gift-bow, .gift-bow-center, .gift-bow-left, .gift-bow-right, .gift-box, .gift-lid, .gift-lid-shadow, .gift-star {
position: absolute;
}
.gift-bow-center, .gift-bow-left, .gift-bow-right {
background-color: #c20030;
}
.gift-bow {
left: 7.5em;
bottom: 11em;
height: 2em;
width: 3em;
transform-origin: 50% 230%;
animation: bowBounceAnim 1.5s ease-in-out infinite;
}
.gift-bow-center {
height: 100%;
width: 100%;
border-radius: 1em;
}
.gift-bow-left, .gift-bow-right {
top: 0.3em;
height: 5em;
width: 4em;
box-shadow: 0 0 0 0.7em #f5003d inset;
z-index: -1;
}
.gift-bow-left::before, .gift-bow-right::before {
content: "";
position: absolute;
display: block;
background-color: #f5003d;
border-radius: inherit;
inset: 0;
}
.gift-bow-left {
right: calc(100% - 0.75em);
transform: rotate(35deg);
transform-origin: 100% 15%;
border-radius: 1.5em 0 3em 1em / 1.5em 0 3em 3.5em;
animation: bowLeftPivot 1.5s ease-in-out infinite;
}
.gift-bow-left::before {
clip-path: polygon(0 42%, 100% 12%, 100% 100%, 0 100%);
}
.gift-bow-right {
left: calc(100% - 0.75em);
transform: rotate(-35deg);
transform-origin: 0% 15%;
border-radius: 0 1.5em 1em 3em / 0 1.5em 3.5em 3em;
animation: bowRightPivot 1.5s ease-in-out infinite;
}
.gift-bow-right::before {
clip-path: polygon(0 12%, 100% 42%, 100% 100%, 0 100%);
}
.gift-box, .gift-lid, .gift-lid-shadow {
transform-origin: 50% 100%;
}
.gift-box {
left: 3.3em;
bottom: 0.5em;
height: 9em;
width: 11.4em;
background: linear-gradient(#c20030, #c20030) 50% 50% / 3.3em 100% no-repeat, #e6e6e6;
border-radius: 1.5em;
animation: boxBounceAnim 1.5s ease-in-out infinite;
overflow: hidden;
}
.gift-lid, .gift-lid-shadow {
height: 3.3em;
width: 13em;
border-radius: 1em;
}
.gift-lid {
left: 2.5em;
bottom: 8.7em;
background: linear-gradient(#f5003d, #f5003d) 50% 50% / 3.3em 100% no-repeat, #ffffff;
animation: lidBounceAnim 1.5s ease-in-out infinite;
}
.gift-lid-shadow {
top: -1.5em;
left: -1em;
background-color: hsla(0, 0%, 0%, 0.1);
animation: lidShadowBounceAnim 1.5s ease-in-out infinite;
}
.gift-star {
transform: scale(0);
background-color: #ffffff;
clip-path: polygon(50% 0, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0 50%, 35% 35%);
animation: starRotateClockWiseAnim 1.5s ease-in-out infinite;
}
.gift-star-2, .gift-star-4, .gift-star-5 {
animation-name: starRotateAntiClockWiseAnim;
}
.gift-star-1 {
top: 0;
left: 12.5em;
height: 1.5em;
width: 1.5em;
animation-delay: calc(1.5s * 0.5);
}
.gift-star-2 {
top: 2em;
left: 10em;
height: 1.75em;
width: 1.75em;
animation-delay: calc(1.5s * 0.125);
}
.gift-star-3 {
top: 8em;
left: 0;
height: 1.25em;
width: 1.25em;
animation-delay: calc(1.5s * 0.25);
}
.gift-star-4 {
top: 10.5em;
right: 0;
height: 1.75em;
width: 1.75em;
}
.gift-star-5 {
top: 12em;
left: 1.5em;
height: 2.5em;
width: 2.5em;
animation-delay: calc(1.5s * 0.375);
}
@keyframes bowBounceAnim {
0%, 50%, 100% {
transform: translateY(0) rotate(0);
}
62.5% {
transform: translateY(75%) rotate(0);
animation-timing-function: ease-in;
}
68.75% {
transform: translateY(-37.5%) rotate(15deg);
animation-timing-function: ease-out;
}
75% {
transform: translateY(-150%) rotate(5deg);
animation-timing-function: ease-in-out;
}
87.5% {
transform: translateY(65%) rotate(-3deg);
}
}
@keyframes bowLeftPivot {
0%, 50%, 100% {
transform: rotate(35deg);
}
62.5%, 87.5% {
transform: rotate(45deg);
}
75% {
transform: rotate(30deg);
}
}
@keyframes bowRightPivot {
0%, 50%, 100% {
transform: rotate(-35deg);
}
62.5%, 87.5% {
transform: rotate(-45deg);
}
75% {
transform: rotate(-34deg);
}
}
@keyframes boxBounceAnim {
0%, 50%, 100% {
transform: translateY(0) scale(1, 1);
}
62.5% {
transform: translateY(4%) scale(1.12, 0.89);
}
75% {
transform: translateY(-11%) scale(0.95, 1.1);
}
87.5% {
transform: translateY(0) scale(1.05, 0.9);
}
}
@keyframes lidBounceAnim {
0%, 50%, 100% {
transform: translateY(0) scale(1, 1) rotate(0);
}
62.5% {
transform: translateY(45%) scale(1.14, 0.95) rotate(0);
animation-timing-function: ease-in;
}
68.75% {
transform: translateY(-22.5%) scale(1.05, 1.03) rotate(15deg);
animation-timing-function: ease-out;
}
75% {
transform: translateY(-90%) scale(0.96, 1.1) rotate(5deg);
animation-timing-function: ease-in-out;
}
87.5% {
transform: translateY(30%) scale(1.12, 0.93) rotate(-3deg);
}
}
@keyframes lidShadowBounceAnim {
0%, 50%, 100% {
transform: translateY(0) scale(1, 1) rotate(0);
}
62.5% {
transform: translateY(10%) scale(1.14, 0.95) rotate(0);
animation-timing-function: ease-in;
}
68.75% {
transform: translateY(-10%) scale(1.05, 1.03) rotate(15deg);
animation-timing-function: ease-out;
}
75% {
transform: translateY(-30%) scale(0.96, 1.1) rotate(5deg);
animation-timing-function: ease-in-out;
}
87.5% {
transform: translateY(10%) scale(1.12, 0.93) rotate(-3deg);
}
}
@keyframes starRotateClockWiseAnim {
0% {
transform: scale(0) rotate(0);
}
25% {
transform: scale(1) rotate(0.25turn);
animation-timing-function: ease-out;
}
50%, 100% {
transform: scale(0) rotate(0.5turn);
}
}
@keyframes starRotateAntiClockWiseAnim {
0% {
transform: scale(0) rotate(0);
}
25% {
transform: scale(1) rotate(-0.25turn);
animation-timing-function: ease-out;
}
50%, 100% {
transform: scale(0) rotate(0.5turn);
}
}Thanks for visiting