Creating Stunning CSS Border Animation with Linear-Gradient and Keyframes
how to make rgb border animation in css.
How to make rgb
How to animate rgb
How to make a cool rgb border
Introduction:
CSS animations have opened up a world of creativity and interactivity on the web. In this blog post, we will explore a mesmerizing CSS border animation that uses linear-gradient and keyframes. By combining these powerful CSS features, we can achieve a stunning steam-like effect around a block element. Follow along as we dive into the code, step-by-step, to understand how this captivating animation is crafted.
Step 1: Setting Up the HTML and CSS Structure.
To get started, we need a basic HTML structure and CSS reset. In this example, we will create a black background with a centered block element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Border Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="block"></div>
</body>
</html>
body {
margin: 0;
padding: 0;
background-color: #000;
}
.block {
position: relative;
margin: 300px auto 0;
width: 500px;
height: 250px;
background: linear-gradient(0deg, #000, #272727);
}
Step 2: Creating the Border Animation
Next, we'll add the CSS code that creates the steam-like border animation using pseudo-elements ::before and ::after.
.block:before,
.block: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% + 4px);
height: calc(100% + 4px);
z-index: -1;
animation: steam 20s linear infinite;
}
@keyframes steam {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
.block:after {
filter: blur(50px);
}
Explanation:
1. We create two pseudo-elements (::before and ::after) for the .block element. These elements will be positioned slightly outside the block and serve as the animated borders.
2. The background of these pseudo-elements is set to a linear gradient with multiple colors, creating the steam effect. The linear gradient is specified at a 45-degree angle, transitioning between various vibrant colors.
3. The background-size property is set to 400%, allowing the linear gradient to cover the entire element.
4. The animation is defined using the @keyframes rule named "steam." This animation moves the background position from 0% to 400% and back to 0%, creating the illusion of flowing steam.
5. The "steam" animation has a duration of 20 seconds, linear timing, and runs infinitely.
6. To add depth and blur to the animation, we apply a blur filter to the ::after pseudo-element.
