YouTube Video Link: Animated Gradient Border Text using HTML CSS
Html CSS Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Lato:200');
html,
body {
width: 100%;
height: 100%;
}
body {
background-color: black;
background-size: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.animated-box {
font-family: 'Lato';
color: #ffffff;
padding: 30px;
text-align: center;
border-radius: 4px;
}
.animated-box h1 {
font-weight: 200;
font-size: 40px;
text-transform: uppercase;
}
.animated-box p {
font-weight: 200;
}
/* The animation starts here */
.animated-box {
position: relative;
}
.animated-box:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 4px;
background: linear-gradient(120deg, #00F260, #0575E6, #00F260);
background-size: 300% 300%;
clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px 100%, 100% 100%, 100% 0%, 0% 0%);
}
.animated-box.in:after {
animation: frame-enter 1s forwards ease-in-out reverse, gradient-animation 4s ease-in-out infinite;
}
/* motion */
@keyframes gradient-animation {
0% {
background-position: 15% 0%;
}
50% {
background-position: 85% 100%;
}
100% {
background-position: 15% 0%;
}
}
@keyframes frame-enter {
0% {
clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px 100%, 100% 100%, 100% 0%, 0% 0%);
}
25% {
clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 100% 100%, 100% 0%, 0% 0%);
}
50% {
clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, 100% 0%, 0% 0%);
}
75% {
-webkit-clip-path: polygon(0% 100%, 3px 100%, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 0%, 0% 0%);
}
100% {
-webkit-clip-path: polygon(0% 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 0% 100%);
}
}
</style>
</head>
<body>
<div class="animated-box in">
<h1>Blink Coders!</h1>
<p>Animated Gradient Border</p>
</div>
</body>
</html>
Thanks for Visiting Blinks Coders!
Tags:
gradient border css, css gradient border, gradient border, css gradient border animation, animated gradient border, css gradient border image, animated border, how to use gradient in border, css gradient, css border animation, animated gradient border css, gradient border animation, css gradient animation, border animation, animated gradient border using html css, colorful gradient border, gradient border with multiple color, css glowing gradient, css border
Post a Comment