Real time example

Thank you for 8k visiters

Inspect the HTML

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thank you</title>
</head>
<body>
<style>
body{
background-color: rgba(145, 66, 92, 0.746);
overflow: hidden;
color: rgb(0, 0, 0);
}
span.message{
width: 70%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
padding: 35px;
border-radius: 5px;
border: 5px solid black;
text-shadow: 5px 4px 12px;
box-shadow: 10px 5px 2px black;
background: linear-gradient(rgba(85, 87, 216, 0.897),rgb(64, 148, 163),rgb(19, 175, 71));
text-align: center;
font-family: fantasy;
}
.paper {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
height: 350px;
overflow: hidden;
}

.paper-piece {
position: absolute;
width: 8px;
height: 16px;
background: #ffd300;
top: 0;
opacity: 0;
}
.paper-piece:nth-child(1) {
left: 7%;

transform: rotate(-40deg);
animation: makeItRain 1000ms infinite ease-out;
animation-delay: 182ms;
animation-duration: 1116ms;
}
.paper-piece:nth-child(2) {
left: 14%;
transform: rotate(4deg);
animation: makeItRain 1000ms infinite ease-out;
animation-delay: 161ms;
animation-duration: 1076ms;
}
.paper-piece:nth-child(3) {
left: 21%;
transform: rotate(-51deg);
animation: makeItRain 1000ms infinite ease-out;
animation-delay: 481ms;
animation-duration: 1103ms;
}
.paper-piece:nth-child(4) {
left: 28%;
transform: rotate(61deg);
animation: makeItRain 1000ms infinite ease-out;
animation-delay: 334ms;
animation-duration: 708ms;
}
.paper-piece:nth-child(5) {
left: 35%;
transform: rotate(-52deg);
animation: makeItRain 1000ms infinite ease-out;
animation-delay: 302ms;
animation-duration: 776ms;
}
.paper-piece:nth-child(6) {
left: 42%;
transform: rotate(38deg);
animation: makeItRain 1000ms infinite ease-out;
animation-delay: 180ms;
animation-duration: 1168ms;
}
.paper-piece:nth-child(7) {
left: 49%;
transform: rotate(11deg);
animation: makeItRain 1000ms infinite ease-out;
animation-delay: 395ms;
animation-duration: 1200ms;
}
.paper-piece:nth-child(8) {
left: 56%;
transform: rotate(49deg);
animation: makeItRain 1000ms infinite ease-out;
animation-delay: 14ms;
animation-duration: 887ms;
}
.paper-piece:nth-child(9) {
left: 63%;
transform: rotate(-72deg);
animation: makeItRain 1000ms infinite ease-out;
animation-delay: 149ms;
animation-duration: 805ms;
}
.paper-piece:nth-child(10) {
left: 70%;
transform: rotate(10deg);
animation: makeItRain 1000ms infinite ease-out;
animation-delay: 351ms;
animation-duration: 1059ms;
}
.paper-piece:nth-child(11) {
left: 77%;
transform: rotate(4deg);
animation: makeItRain 1000ms infinite ease-out;
animation-delay: 307ms;
animation-duration: 1132ms;
}
.paper-piece:nth-child(12) {
left: 84%;
transform: rotate(42deg);
animation: makeItRain 1000ms infinite ease-out;
animation-delay: 464ms;
animation-duration: 776ms;
}
.paper-piece:nth-child(13) {
left: 91%;
transform: rotate(-72deg);
animation: makeItRain 1000ms infinite ease-out;
animation-delay: 429ms;
animation-duration: 818ms;
}
.paper-piece:nth-child(odd) {
background: #7431e8;
}
.paper-piece:nth-child(even) {
z-index: 1;
}
.paper-piece:nth-child(4n) {
width: 5px;
height: 12px;
animation-duration: 2000ms;
}
.paper-piece:nth-child(3n) {
width: 3px;
height: 10px;
animation-duration: 2500ms;
animation-delay: 1000ms;
}
.paper-piece:nth-child(4n-7) {background: red;}
@keyframes makeItRain{
from {opacity: 0;}
50% {opacity: 1;} 
to { transform: translateY(350px);opacity: .8;}
}
@-webkit-keyframes makeItRain {
from {opacity: 0;}
50% {opacity: 1;}
to { transform: translateY(350px);}
}
</style>

<h1>Thank You for supporting my website</h1>
<h2>This is a celebration of 8k visiters</h2>
<h3>In future I will post many of code in our website</h3>
<h4>Travel with our community</h4>
















</body>
</html>

Download this HTML Source Code

Kumar Lakshmanan

Paper falling Effect Celebration

Real time example

Thank you for 8k visiters

Inspect the HTML

Download this HTML Source Code

Post a Comment

2 Comments

Labels

Join Our Whatsapp Group

Search This Blog

Popular Posts

Disco Lights Animation using CSS

Button bubble effect using javascript

St.Mary's HSS | My School

Header on toggle Button

Total Pageviews

Contact Form

Footer Menu Widget

Kumar Lakshmanan

Paper falling Effect Celebration

Real time example

Thank you for 8k visiters

Inspect the HTML

Download this HTML Source Code

You may like these posts

Post a Comment

2 Comments

Labels

Join Our Whatsapp Group

Search This Blog

Popular Posts

Disco Lights Animation using CSS

Button bubble effect using javascript

St.Mary's HSS | My School

Header on toggle Button

Total Pageviews

Contact Form

Footer Menu Widget