10K Subs - Thank you | CSS Circle Burst Animation - Using HTML, CSS & Javascript | Coding Snow | Creative Web Design Tutorials

Description

Hello everyone! In this video, you are going to learn how to create a circular burst animation with HTML and CSS using keyframes. It is very awesome CSS animation using CSS properties like "transform: rotate() translate();", "opacity". So you can do some awesome and creative works using this animation. In this video also you can learn how to clone this circle burst animation multiple times in random positions in a webpage automatically using vanilla javascript. Let's see to create this circular burst animation.

First, create the index.html file and the style.css file. After you created these two files, then link the style.css file to the index.html file in between <head></head> tags. Then start the HTML part of the text animation and circle burst animation in the index.html file as you can see in the video. After the HTML part is complete, then go to the style.css file and do the styling part of the text animation and circle burst animation as you can see in the video. After the styling part is completed then go to the index.html file for the Javascript part. In the index.html file before the body close tag open <script></script> tags and complete the Javascript part of the circle burst animation to clone it on random positions on the document in between the script tags as you can see in the video. So that's all, Hope this video will be helpful to get some creative ideas to do more creative works using CSS animations.

Source Codes

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
	<head>
		<meta charset="utf-8">
		<title>10K Subscribers Special | With Circle Burst Animation</title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>

<div class="text-container">
			<h1>10K<br><span>Subscribers</span></h1>
			<div class="animated-text">
				<h2>Thank you!</h2>
				<h2>OBRIGADO!</h2>
				<h2>धन्यवाद!</h2>
				<h2>Terima kasih!</h2>
				<h2>ස්තුතියි!</h2>
				<h2>Gracias!</h2>
			</div>
		</div>
		<div class="animation-container">
			<div class="burst">
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
				<div class="line"></div>
			</div>
		</div>

burst.style.top = Math.random() * 550 + 'px';
			burst.style.left = Math.random() * 750 + 'px';

let burstClone = burst.cloneNode(true);
			animContainer.appendChild(burstClone);

setTimeout(() => {
				burstClone.remove();
			}, 20000);
		}
		setInterval(createBurst, 2000);
		</script>

</body>
</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

*{
	margin: 0;
	padding: 0;
	font-family: "Poppins", sans-serif;
}

body{
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	background: #151820;
	overflow: hidden;
}

.text-container h1{
	color: #fff;
	font-size: 300px;
	font-weight: 900;
	text-align: center;
	line-height: 80px;
}

.text-container h1 span{
	font-size: 80px;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.text-container .animated-text{
	position: relative;
	background: #4285F4;
	margin-top: 15px;
	width: 570px;
	height: 75px;
	box-shadow: 0 0 10px #4285F4,
	            0 0 120px #4285F4;
	overflow: hidden;
}

.text-container .animated-text:before{
	content: '';
	background: rgba(255, 255, 255, 0.1);
	position: absolute;
	width: 55%;
	height: 100%;
	transform: skew(25deg) translateX(-20px);
}

.text-container .animated-text h2{
	color: #fff;
	font-size: 45px;
	text-transform: uppercase;
	text-align: center;
	line-height: 75px;
}

.text-container .animated-text h2:nth-child(1){
	animation: text-move 22s infinite;
}

@keyframes text-move{
	0%{
		margin-top: 0;
	}
	10%{
		margin-top: -75px;
	}
	20%{
		margin-top: -150px;
	}
	30%{
		margin-top: -225px;
	}
	40%{
		margin-top: -300px;
	}
	50%{
		margin-top: -375px;
	}
	60%{
		margin-top: -300px;
	}
	70%{
		margin-top: -225px;
	}
	80%{
		margin-top: -150px;
	}
	90%{
		margin-top: -75px;
	}
	100%{
		margin-top: 0;
	}
}

.text-container{
	-webkit-box-reflect: below 1px linear-gradient(transparent, rgba(255, 255, 255, 0.05));
}

/* circle burst animation */

.animation-container{
	z-index: 999;
	position: absolute;
	width: 750px;
	height: 550px;
}

.burst{
	position: absolute;
}

.burst .line{
	position: absolute;
	background: #fff;
	width: 10px;
	height: 10px;
}

.burst .line:nth-child(1){
	background: #ea4335;
	animation: move01 2s linear infinite;
}

@keyframes move01{
	0%{
		transform: translate(0, 0);
		opacity: 0;
	}
	50%{
		transform: translate(0, -90px);
		opacity: 1;
	}
	100%{
		transform: translate(0, -140px);
		opacity: 0;
	}
}

.burst .line:nth-child(2){
	background: #34a853;
	animation: move02 2s linear infinite;
}

@keyframes move02{
	0%{
		transform: rotate(45deg) translate(0, 0);
		opacity: 0;
	}
	50%{
		transform: rotate(45deg) translate(0, -90px);
		opacity: 1;
	}
	100%{
		transform: rotate(45deg) translate(0, -140px);
		opacity: 0;
	}
}

.burst .line:nth-child(3){
	background: #4285f4;
	animation: move03 2s linear infinite;
}

@keyframes move03{
	0%{
		transform: rotate(90deg) translate(0, 0);
		opacity: 0;
	}
	50%{
		transform: rotate(90deg) translate(0, -90px);
		opacity: 1;
	}
	100%{
		transform: rotate(90deg) translate(0, -140px);
		opacity: 0;
	}
}

.burst .line:nth-child(4){
	background: #fbbc05;
	animation: move04 2s linear infinite;
}

@keyframes move04{
	0%{
		transform: rotate(135deg) translate(0, 0);
		opacity: 0;
	}
	50%{
		transform: rotate(135deg) translate(0, -90px);
		opacity: 1;
	}
	100%{
		transform: rotate(135deg) translate(0, -140px);
		opacity: 0;
	}
}

.burst .line:nth-child(5){
	background: #DC18B9;
	animation: move05 2s linear infinite;
}

@keyframes move05{
	0%{
		transform: rotate(180deg) translate(0, 0);
		opacity: 0;
	}
	50%{
		transform: rotate(180deg) translate(0, -90px);
		opacity: 1;
	}
	100%{
		transform: rotate(180deg) translate(0, -140px);
		opacity: 0;
	}
}

.burst .line:nth-child(6){
	background: #FF5A00;
	animation: move06 2s linear infinite;
}

@keyframes move06{
	0%{
		transform: rotate(225deg) translate(0, 0);
		opacity: 0;
	}
	50%{
		transform: rotate(225deg) translate(0, -90px);
		opacity: 1;
	}
	100%{
		transform: rotate(225deg) translate(0, -140px);
		opacity: 0;
	}
}

.burst .line:nth-child(7){
	background: #8621F8;
	animation: move07 2s linear infinite;
}

@keyframes move07{
	0%{
		transform: rotate(270deg) translate(0, 0);
		opacity: 0;
	}
	50%{
		transform: rotate(270deg) translate(0, -90px);
		opacity: 1;
	}
	100%{
		transform: rotate(270deg) translate(0, -140px);
		opacity: 0;
	}
}

.burst .line:nth-child(8){
	background: #FFFF1B;
	animation: move08 2s linear infinite;
}

@keyframes move08{
	0%{
		transform: rotate(315deg) translate(0, 0);
		opacity: 0;
	}
	50%{
		transform: rotate(315deg) translate(0, -90px);
		opacity: 1;
	}
	100%{
		transform: rotate(315deg) translate(0, -140px);
		opacity: 0;
	}
}

Download Source Files

If the download didn't start automatically, click here.

Wednesday, January 13, 2021

10K Subs - Thank you | CSS Circle Burst Animation - Using HTML, CSS & Javascript

Description

Source Codes

index.html

style.css

Post a Comment

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form

Wednesday, January 13, 2021

10K Subs - Thank you | CSS Circle Burst Animation - Using HTML, CSS & Javascript

Description

Source Codes

index.html

style.css

Post a Comment

Follow Us on

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form