Happy Rakshabandhan Animation using HTML/CSS

#coded by DEVANSH mishra#

<!DOCTYPE html>

<html>

<head>

<title>Wishing You Happy Raksha bandhan</title>

<style>

i {

color:#f06414;

}

input[type=name], select {

width: 100%;

padding: 12px 20px;

margin: 4px 0;

display: inline-block;

border: 1px solid #ccc;

border-radius: 4px;

box-sizing: border-box;

}

.footerbtn {

display: block;

line-height: 15px;

position: fixed;

left:0px;

bottom:0px;

height:40px;

border-radius: 15px;

box-sizing: border-box;

padding: 5px;

background:#34af23;

color: #ffffff;

font-size: 18px;

text-align: center;

text-decoration: none;

width:95%;

margin-left:10px;

margin-right:30px;

box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .3);

animation: footer infinite linear 1s;

-webkit-transform: translate3d(30%,0,0);

transform: translate3d(30%,0,0);

position: fixed;

}

.footerbtn :active {

box-shadow: none

}

@-webkit-keyframes footer {

from {

-webkit-transform: rotateZ(0)

}

25% {

-webkit-transform: rotateZ(1.5deg)

}

50% {

-webkit-transform: rotateZ(0deg)

}

75% {

-webkit-transform: rotateZ(-1.5deg)

}

to {

-webkit-transform: rotateZ(0)

}}

@-webkit-keyframes jello { from, 11.1%, to { transform: none; }

22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }

33.3% { transform: skewX(6.25deg) skewY(6.25deg); }

44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }

55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }

66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }

77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); }

88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }}

.jello { -webkit-animation: jello 3s infinite; transform-origin: center; -webkit-animation-delay:6s}

@-webkit-keyframes hue {

from { -webkit-filter: hue-rotate(0deg); }

to { -webkit-filter: hue-rotate(-360deg); }}

.m1{position:fixed;left:1%; width:auto;height:100%;top:1%;color:#000;}

.m2{position:fixed;right:1%; width:auto;height:100%;top:1%;color:#000;}

.bubbles {

font-family: arial;

}

.bubbles hi {

font-family: 'Luckiest Guy', cursive;

color: black;

}

hi {

font-size:2.5em;

user-select:none;

}

hi span { display:inline-block; animation:float .2s ease-in-out infinite; }

@keyframes float {

0%,100%{ transform:none; }

33%{ transform:translateY(-1px) rotate(-2deg); }

66%{ transform:translateY(1px) rotate(2deg); }

}

body:hover span { animation:bounce .6s; }

@keyframes bounce {

0%,100%{ transform:translate(0); }

25%{ transform:rotateX(20deg) translateY(2px) rotate(-3deg); }

50%{ transform:translateY(-20px) rotate(3deg) scale(1.1); }

}

@import url(http://fonts.googleapis.com/css?family=Concert One);

h1 {

animation:glow 10s ease-in-out infinite;

}

* { box-sizing:border-box; }

animation:wobble 5s ease-in-out infinite;

figure {

transform-origin:center center;

transform-style:preserve-3d;

}

@keyframes wobble {

0%,100%{ transform:rotate3d(1,1,0,40deg); }

25%{ transform:rotate3d(-1,1,0,40deg); }

50%{ transform:rotate3d(-1,-1,0,40deg); }

75%{ transform:rotate3d(1,-1,0,40deg); }

}

h1 {

display:block;

width:90%;

line-height:1.5;

font:900 35px 'Concert One', sans-serif;

position:absolute;

color:#fff;

}

@keyframes glow {

0%,100%{ text-shadow:0 0 30px red; }

25%{ text-shadow:0 0 30px orange; }

50%{ text-shadow:0 0 30px forestgreen; }

75%{ text-shadow:0 0 30px cyan; }

}

h1:nth-child(2){ transform:translateZ(5px); }

h1:nth-child(3){ transform:translateZ(10px);}

h1:nth-child(4){ transform:translateZ(15px); }

h1:nth-child(5){ transform:translateZ(20px); }

h1:nth-child(6){ transform:translateZ(25px); }

h1:nth-child(7){ transform:translateZ(30p.rock{animation:infinite 1s rock}

@keyframes rock { 0% { transform: rotate(-1deg); }

50% { transform: rotate(2deg); }

100% { transform: rotate(-1deg); }}x); }

h1:nth-child(8){ transform:translateZ(35px); }

h1:nth-child(9){ transform:translateZ(40px); }

h1:nth-child(10){ transform:translateZ(45px); }

.rock{animation:infinite 1s rock}

@keyframes rock { 0% { transform: rotate(-1deg); }

50% { transform: rotate(2deg); }

100% { transform: rotate(-1deg); }}

.fuck{animation:infinite 1s fuck}

@keyframes rock { 0% { transform: rotate(-2deg); }

50% { transform: rotate(2deg); }

100% { transform: rotate(-2deg); }}

h2 {

font-size: 38px;

text-align: center;

color:#008000;

animation: rock infinite 1s;

font-family: 'Indie Flower', cursive;

letter-spacing: 2px;

}

h3 {

font-size: 48px;

text-align: center;

padding:1px;

margin:1px;

color: #f06414;

aanimation: fuck infinite 1s;

font-family: 'Indie Flower', cursive;

letter-spacing: 2px;

}

#clockbox {

color: white; font-size: 20px; background-color: darkgreen; display: inline-block; border: 3px solid darkgreen ; border-radius: 3px; margin:0px; padding: 0px; font-weight: bold;

}

@font-face {

font-family: 'Kruti-Dev-010';

src: url('fonts/Kruti-Dev-010.ttf.html') format('woff'),

url('fonts/Kruti-Dev-010.ttf-2.html#Kruti-Dev-010') format('svg'),

url('fonts/Kruti-Dev-010.ttf-3.html'),

url('fonts/Kruti-Dev-010d41d.html?#iefix') format('embedded-opentype');

font-weight: normal;

font-style: normal;

}

body

{

background: url("https://data.whicdn.com/images/277379513/original.gif");

background-size: cover;

}

@-webkit-keyframes AnimationName {

0%{background-position:48% 0%}

50%{background-position:53% 100%}

100%{background-position:48% 0%}

}

@-moz-keyframes AnimationName {

0%{background-position:48% 0%}

50%{background-position:53% 100%}

100%{background-position:48% 0%}

}

@-o-keyframes AnimationName {

0%{background-position:48% 0%}

50%{background-position:53% 100%}

100%{background-position:48% 0%}

}

@keyframes AnimationName {

0%{background-position:48% 0%}

50%{background-position:53% 100%}

100%{background-position:48% 0%}

}

.hindi-text{

font-family: 'Kruti-Dev-010' !important;

font-size: 1.2em;

}

.container {

padding-right: 30px;

padding-left: 30px;

padding-top: 20px;

}

.main-form {

max-width: 500px;

margin: auto;

text-align: center;

position: relative;

padding: 20px;

box-shadow: 3px 3px 23px 0 rgba(0, 0, 0, 0.64);

margin-bottom: 60px;

background-color: rgba(255, 255, 255, 0.96);

}

.main-form h4 {

text-shadow: -2px -1px 2px #f39f01;

font-weight: 700;

color: #da004c;

border-bottom: 1px solid #f93;

padding-bottom: 10px;

margin-bottom: 10px;

}

label{

color: #da004c;

}

.element {

display: block;

align-items: center;

}

i.fa-camera {

margin: 10px;

cursor: pointer;

font-size: 30px;

}

i:hover {

opacity: 0.6;

}

input {

display: none;

}

.form-control{

border: 1px solid #f39f01;

font-size: 13px;

color:rgb(199, 120, 1) ;

}

.main-form .title {

text-shadow: -1px 3px 19px rgba(0, 0, 0, 0.2);

font-weight: 700;

text-align: center;

font-size: 16px

}

.main-form .form {

text-align: left

}

.main-form .form label small {

font-size: 10px

}

.main-form .form .form-control {

border-radius: 0

}

.main-form .form .btn {

border-radius: 0;

width: 50% !important;

margin: auto !important;

display: block;

font-weight: 600;

color: #fff;

border-color: #f39f01;

font-size: 20px;

background-color: rgba(222, 13, 77, 0.86);

}

.main-form .form .bg-group label {

display: inline-block;

width: 50px;

height: 50px;

margin: 5px;

border: 5px solid rgba(0, 0, 0, 0.2);

border-radius: 50%;

background-size: cover;

cursor: pointer

}

.main-form .form .bg-group label.active {

border-color: #f30

}

.swing1 {

animation:swing1 3s cubic-bezier(0, 0, 0.25, 1) infinite;

}

.main-form .form .vi-group label {

display: inline-block;

width: 100px;

height: 75px;

margin: 5px;

border: 5px solid rgba(0, 0, 0, 0.2);

border-radius: 5px;

background-size: cover;

cursor: pointer;

background-position: center

}

.main-form .form .vi-group label.active {

border-color: #f30

}

.main-form .border {

border: 1px solid #f39f01;

padding: 10px;

}

.main-form .table {

font-size: 12px;

margin: 0;

white-space: pre-line

}

.main-form .table textarea {

display: none

}

.main-form .table tr td {

cursor: pointer

}

.main-form .table tr.active textarea {

display: block

}

.main-form .pp_box {

display: none

}

.main-form .pp_box label {

text-align: center;

cursor: pointer

}

.main-form .pp_box label img {

margin-bottom: 30px

}

.main-greeting {

max-width: 400px;

margin: auto;

text-align: center;

position: relative;

padding: 5px;

background:#f0f0f0f;

margin-bottom: 60px

}

.greeting-box {

overflow:hidden;

background: rgba(255, 255, 255, 0.39);

border-radius: inherit;

}

.main-greeting .main_body {

text-align: center;

font-size: 1.3em

}

.main-greeting .main_body .text2 {

padding: 10px;

font-size: 20px

}

.main-greeting .text {

color: #405d9b;

letter-spacing: 1px;

font-weight: 600;

padding: 0px 10px;

text-align: center;

}

.main-greeting .pp-img {

max-width: 400px;

margin-bottom: 10px;

box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.64);

}

.main-greeting .text_gradient {

margin: 5px auto;

font-weight: 700;

font-size: 24px;

color: #b50dae;

}

.busi {

font-size: 30px;

font-weight: 800;

color:#f06000;

}

.share-box {

position: fixed;

left: 0;

right: 0;

bottom: 0

}

.share-box div {

padding: 0

}

.share-box .btn {

border-radius: 0;

color: #fff;

text-transform: uppercase;

padding: 15px 0;

font-size: 11px

}

.footer{

border-top: 1px solid #f93;

margin-top: 10px;

padding-top: 5px;

color: #da004c;

}

.share-box .btn.whatsapp {

background-color: #4caf50

}

.share-box .btn.facebook {

background-color: #405d9b

}

.share-box .btn.download {

background: #ed5600;

}

.new_wish{

font-size: 20px;

font-weight: bold;

border-left: 0;

border-right: 0;

border-radius: 0px;

}

.btn-bg {

color: #fff;

background-color: #f00 !important;

border-color: #f00 !important;

}

.btn-bg:hover{

background-color: #000 !important;

border-color: #000 !important;

}

@keyframes move {

0% {

top: 0

}

60% {

top: -40px

}

100% {

top: -80px

}

@-webkit-keyframes jump {

0% {

-webkit-transform: translateY(0);

transform: translateY(0)

}

20% {

-webkit-transform: translateY(0);

transform: translateY(0)

}

40% {

-webkit-transform: translateY(-30px);

transform: translateY(-30px)

}

50% {

-webkit-transform: translateY(0);

transform: translateY(0)

}

60% {

-webkit-transform: translateY(-15px);

transform: translateY(-15px)

}

80% {

-webkit-transform: translateY(0);

transform: translateY(0)

}

100% {

-webkit-transform: translateY(0);

transform: translateY(0)

}

@keyframes jump {

0% {

transform: translateY(0)

}

20% {

transform: translateY(0)

}

40% {

transform: translateY(-30px)

}

50% {

transform: translateY(0)

}

60% {

transform: translateY(-15px)

}

80% {

transform: translateY(0)

}

100% {

transform: translateY(0)

}

</style>

</head>

</marquee>

</marquee>

<ins class="adsbygoogle"

style="display:inline-block;width:300px;height:60px"

data-ad-client="ca-pub-1440082091294124"

data-ad-slot="4681882867"></ins>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

</center>

<p style="text-align: center;"><strong><span style="font-size: 14pt; font-family: tahoma, arial, helvetica, sans-serif;"><span style="color: #ff0000;">⍟☆⍣ Happy Raksha Bandhan ⍣☆⍟</span></span></strong></p>

var a=prompt("Please Enter Your Name\n\n👇👇👇👇👇");

document.write(a);

</script> </h1>

document.write(a);

</script> </h1>

document.write(a);

</script> </h1>

document.write(a);

</script></h1>

document.write(a);

</script> </h1>

document.write(a);

</script> </h1>

document.write(a);

</script></h1>

</figure>

<h3>Wishing You</h3>

</h2>

<ins class="adsbygoogle"

style="display:block"

data-ad-client="ca-pub-1440082091294124"

data-ad-slot="2298472463"

data-ad-format="auto"

data-full-width-responsive="true"></ins>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

</center>

// Set the date we're counting down to

var countDownDate = new Date("15Aug , 2019 00:00:00").getTime();

// Update the count down every 01 second

var x = setInterval(function() {

// Get todays date and time

var now = new Date().getTime();

// Find the distance between now an the count down date

var distance = countDownDate - now;

// Time calculations for days, hours, minutes and seconds

var days = Math.floor(distance / (1000 * 60 * 60 * 24));

var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

var seconds = Math.floor((distance % (1000 * 60)) / 1000);

// Display the result in the element with id="demo"

document.getElementById("demo").innerHTML = days "<i> Days,</i> " hours " <i>Hrs,</i> "

minutes "<i> Min,</i> " seconds "<i> Sec</i> ";

// If the count down is finished, write some text

if (distance < 0) {

clearInterval(x);

document.getElementById("demo").innerHTML = "EXPIRED";

}

}, 1000);

</script>

</div>

Search This Blog

Codes.

Happy Rakshabandhan Animation using HTML/CSS

Comments

Post a Comment

Popular posts from this blog

Chandrayan 3 Mission Special :Animation

Python Basic Programs By Devansh Mishra.

" Words moving in circular motion as Tiny Particles " Animation