Happy Christmas and New Year Animation with Sound using HTML/CSS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0">
<title></title>
<style type="text/css">
body {
margin: 0;
background: darkblue;
}
.text {
position: absolute;
top: 80px;
left: 20px;
font-family: times;
font-style: italic;
font-weight: bold;
font-size: 24px;
color: red;
}
.text span {
display: inline-block;
animation: anim 1.2s infinite;
}
.text span:nth-child(5) {
margin-right: 12px;
}
.text span:nth-child(3n-1) {
animation-delay: 0.1s;
}
.text span:nth-child(3n) {
animation-delay: 0.2s;
}
@keyframes anim {
50% {
transform: translate(0, -40px);
}
}
.raindeer {
position: absolute;
left: 20px;
top: -80px;
}
.raindeer div {
background: brown;
}
.raindeer .head {
left: 0;
top: 0;
width: 60px;
height: 35px;
border-radius: 20px 40px 40px 40px;
transform-origin: 45px 25px;
animation: waggle 2s infinite linear;
}
@keyframes waggle {
25% {
transform: rotate(20deg);
}
75% {
transform: rotate(-20deg);
}
}
.raindeer .body {
left: 40px;
top: 25px;
width: 110px;
height: 45px;
border-radius: 40px;
}
.raindeer .leg {
width: 10px;
height: 60px;
top: 40px;
}
.raindeer .leg .hoof {
bottom: 0;
width: 10px;
height: 10px;
background: black;
}
.raindeer .front-leg1 {
left: 10px;
transform-origin: top;
transform: rotate(30deg);
}
.raindeer .front-leg2 {
left: 15px;
}
.raindeer .back-leg1 {
left: 75px;
}
.raindeer .back-leg2 {
left: 90px;
}
.raindeer .snout {
width: 10px;
height: 10px;
top: 0px;
left: 0px;
border-radius: 50% 0 50% 0;
background: red;
}
.raindeer .eye {
width: 10px;
height: 10px;
left: 30px;
top: 5px;
border-radius: 50%;
background: white;
}
.raindeer .eye .lens {
width: 5px;
height: 5px;
border-radius: 50%;
background: black;
}
.raindeer .tail {
width: 20px;
height: 20px;
right: -5px;
top: -5px;
border-radius: 50%;
background: beige;
}
.raindeer .horns {
right: 12px;
top: 4px;
transform: rotate(180deg);
}
.raindeer .horns div {
width: 8px;
height: 16px;
border-radius: 5px;
background: beige;
transform-origin: 4px 2px;
}
.raindeer .horn-part1 {
transform: rotate(10deg);
}
.raindeer .horn-part2a {
transform: translate(0, 12px) rotate(-20deg);
}
.raindeer .horn-part3a {
transform: translate(0, 12px) rotate(60deg);
}
.raindeer .horn-part3b {
transform: translate(0, 12px) rotate(-60deg);
}
.raindeer .horn-part2b {
transform: translate(0, 12px) rotate(60deg);
}
.gift:before {
content: "";
position: absolute;
left: 15px;
top: 0;
width: 5px;
height: 35px;
background: gold;
}
.gift {
width: 35px;
height: 35px;
background: red;
animation: shake1 0.6s infinite linear;
}
.gift:after {
content: "";
position: absolute;
left: 0;
top: 15px;
width: 35px;
height: 5px;
background: gold;
}
@keyframes shake1 {
25% {
transform: rotate(5deg);
}
75% {
transform: rotate(-5deg);
}
}
.gift1 {
left: 90px;
top: 40px;
}
.gift2 {
left: 140px;
top: 50px;
}
.tree {
width: 20px;
height: 35px;
right: 40px;
top: 30px;
background: brown;
}
.tree .part1 {
left: -50px; 
top: -75px;
border-bottom: 80px solid green;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}
.tree .part2 {
left: -40px; 
top: -115px;
border-bottom: 70px solid green;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.tree .part3 {
left: -30px; 
top: -155px;
border-bottom: 60px solid green;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}
.tree .ball {
width: 15px;
height: 20px;
border-radius: 50%;
background: linear-gradient(violet,blue);
animation: shake2 0.6s infinite linear;
}
@keyframes shake2 {
50% {
transform: translate(3px, 0);
}
}
.tree .ball1 {
left: -35px;
top: -10px;
}
.tree .ball2 {
left: 30px;
top: -20px;
}
.tree .ball3 {
left: -10px;
top: -50px;
}
.tree .ball4 {
left: 25px;
top: -70px;
}
.tree .ball5 {
left: -10px;
top: -90px;
}
.tree .ball6 {
left: 10px;
top: -130px;
}
.ground {
position: absolute;
top: 300px;
left: 40px;
width: 260px;
height: 100px;
border-radius: 50%;
background: white;
}
.ground div {
position: absolute;
}
.main {
z-index: 999;
position: fixed;
width: 100%;
height: 100%;
background: white;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.btn {
display: none;
font-family: monospace;
font-weight: bold;
font-size: 24px;
color: white;
padding: 20px;
background: green;
border-radius: 10px;
}
.btn:hover {
background: darkgreen;
transform: scale(0.9);
}
</style>
<script type="text/javascript">
alert("Don\'t forget turn volume on :D");
window.onload = function() {
document.querySelector(".loading").style.display = "none";
document.querySelector(".btn").style.display = "block";
document.querySelector(".btn").onclick = function() {
document.querySelector(".main").style.display = "none";
document.querySelector("#song").play();
}
}
</script>
</head>
<body>
<audio src="https://www.dropbox.com/s/j6dn1tqgy302xb6/03_Last_Christmas.mp3?dl=1" id="song" loop></audio>
<div class="main">
<div class="loading">Loading...</div>
<div class="btn">Discover</div>
</div>
<div class="text">
<span>H</span>
<span>A</span>
<span>P</span>
<span>P</span>
<span>Y</span>
<span> CHRISTMAS </span>
<span>AND </span>
<span>NEW</span>
<span>Y</span>
<span>E</span>
<span>A</span>
<span>R</span>
<span>FROM DEVANSH MISHRA</span>
</div>
<div class="ground">
<div class="raindeer">
<div class="head">
<div class="snout"></div>
<div class="eye">
<div class="lens"></div>
</div>
<div class="horns">
<div class="horn-part1">
<div class="horn-part2a">
<div class="horn-part3a"></div>
<div class="horn-part3b"></div>
</div>
<div class="horn-part2b"></div>
</div>
</div>
</div>
<div class="body">
<div class="leg front-leg1">
<div class="hoof"></div>
</div>
<div class="leg front-leg2">
<div class="hoof"></div>
</div>
<div class="leg back-leg1">
<div class="hoof"></div>
</div>
<div class="leg back-leg2">
<div class="hoof"></div>
</div>
<div class="tail"></div>
</div>
</div>
<div class="gift gift1"></div>
<div class="gift gift2"></div>
<div class="tree">
<div class="part1"></div>
<div class="part2"></div>
<div class="part3"></div>
<div class="ball ball1"></div>
<div class="ball ball2"></div>
<div class="ball ball3"></div>
<div class="ball ball4"></div>
<div class="ball ball5"></div>
<div class="ball ball6"></div>
</div>
</div>
</body>
<span>MADE WITH HTML/CSS</span>
</html>


Comments

Post a Comment

Popular posts from this blog

Chandrayan 3 Mission Special :Animation

<!--   Creator : Devansh Mishra          --> <!doctype html> <html>    <head>      <style> .full {     animation: full 2s linear 40s 1;     animation-fill-mode: forwards; } @keyframes full {     100% {         opacity: 0     } } h2 {     font-size: 30px;     color: mediumseagreen;     font-family: tahoma;     opacity: 0;     animation: ro 2s linear 50s 1;     animation-fill-mode: forwards;     text-align: center;     z-index: 10; } .rover {     width: 400px;     height: 480px;     position: absolute;     background-image: linear-gradient(to top, #eee2e2 0, #e3c09d 15%, #2f2f3a 90%);     margin: auto;     top: -500px;     left: 0;     bottom: 0;     right: 0;     ...
Read more

Python Basic Programs By Devansh Mishra.

Basic programs are given of python which is very useful for Python Beginner's.  1.Hello World print("Hello World") 2.Square Root  number = int(input("enter a number: ")) sqrt = number ** 0.5 print("square root:", sqrt) 3. cube Root def cube_root(x):         return x**(1/3) print(cube_root(27)) 4. Fahrenheit to Celsius temp = float(input("Enter temperature in Fahrenheit: ")) celsius = (temp - 32) * 5/9 print(f"{temp} in Fahrenheit is equal to {celsius} in Celsius")   5. Area of Triangle Height = float(input("Enter Height: ")) Base = float(input("Enter Base: ")) ans = (0.5) * Height * Base print("Area Of Triangle", ans) 6. Area of Circle rad = float(input("Enter Radius Of Circle :")) area = 3.14 * rad * rad print("Area of Circle", area) 7. Armstrong Number in Python from math import * number = int(input("Enter the number : ")) result = 0 n = 0 temp = number; while (temp != 0)...
Read more

" Words moving in circular motion as Tiny Particles " Animation

<!DOCtype html> <html> <style>   body {     margin: 0;     overflow: hidden;   }      a {     position: fixed;     display: inline-block;     margin-left: calc(50vw - 70px);     font-size: 20px;     z-index: 1;     color: white;   } </style> <body>   <script>     let canvas = document.createElement('canvas');     canvas.style.background = '#000'     document.body.appendChild(canvas);     let gl = canvas.getContext("webgl",     {       preserveDrawingBuffer: true     });     let clearPass = program(     {       type: gl.TRIANGLES,       vertexSize: 2,       vertices: [-1, 3, -1, -1, 3, -1], // full screen triangle       shaders: [`             attribute vec2...
Read more