CSS Moving Glow Border Animation

CSS Moving Glow Border Animation. Amination is the sequence of movements. We can also make animation using CSS. This tutorial I am going to make border animation using HTML and CSS. If you want to make animation using CSS you have to well know about CSS. I am trying to show you how CSS plays a vital role in animation. Animation makes the website more lively and attractive. Please copy the given source code and paste into your text editor and run it in your browser.  

 

HTML

<!DOCTYPE html>
<html>
<head>
<title> CSS Moving Glow Border Animation</title>
<link rel ="stylesheet" href ="style.css">
</head>
<body>
<div class="block moving-glow"></div>
</body>
</html>

CSS

body {
	margin: 0;
	padding: 0;
	background-color: #000;
}

.block {
	position: relative;
	margin: 10% auto 0;
	width: 50%;
	height: 400px;
	background: linear-gradient(0deg, #000, #272727);
}

.moving-glow:before, .moving-glow:after {
	content: '';
	position: absolute;
	left: -2px;
	top: -2px;
	background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, 
		#0000ff, #00ff00,#ffff00, #ff0000);
	background-size: 400%;
	width: calc(100% + 10px);
	height: calc(100% + 10px);
	z-index: -1;
	animation: anim-moving-glow 20s linear infinite;
  
}

@keyframes anim-moving-glow {
	0% {
		background-position: 0 0;
	}
	50% {
		background-position: 400% 0;
	}
	100% {
		background-position: 0 0;
	}
}

.moving-glow:after {
	filter: blur(30px);
}

Leave a Comment