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>
html {
height: 100%;
background: #223;
display: grid;
place-items: center;
}
.box {
--border-size: 3px;
--border-angle: 0turn;
width: 60vmin;
height: 50vmin;
background-image: conic-gradient(from var(--border-angle), #213, #112 50%, #213), conic-gradient(from var(--border-angle), transparent 20%, #08f, #f03);
background-size: calc(100% - (var(--border-size) * 2)) calc(100% - (var(--border-size) * 2)), cover;
background-position: center center;
background-repeat: no-repeat;
-webkit-animation: bg-spin 3s linear infinite;
animation: bg-spin 3s linear infinite;
}
@-webkit-keyframes bg-spin {
to {
--border-angle: 1turn;
}
}
@keyframes bg-spin {
to {
--border-angle: 1turn;
}
}
.box:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
@property --border-angle {
syntax: "<angle>";
inherits: true;
initial-value: 0turn;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Thanks for Visiting Blinks Coders!
Tags:
gradient border, css gradient border, animated border, gradient border css, css border animation, animated gradienr border, how to use gradient in border, css border gradients, css gradient animation, border animation, css glowing gradient, css animated border, css gradient, pure css animated snake border, css gradient border animation, gradient border with multiple color, css gradient border image, animated gradient border using html css, colorful gradient border
Post a Comment