Author: | CodMark |
---|---|
Views Total: | 2,764 views |
Official Page: | Go to website |
Last Update: | December 21, 2021 |
License: | MIT |
Preview:

Description:
A fancy animated box border design concept that makes a gradient line cyclically move along the border of the element.
How to use it:
1. Apply a gradient border to the target element.
<div class="demo"></div>
div.demo { width: 250px; height: 250px; box-shadow: 16px 14px 20px #0000008c; border-radius: 10px; position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; } div.demo::before{ content: ""; /* override the gradient here */ background-image: conic-gradient( #ff0052 20deg, transparent 120deg ); width: 150%; height: 150%; position: absolute; animation: rotate 2s linear infinite; } div.demo::after{ content: "CSSScript"; width: 240px; height: 240px; background: #101010; position: absolute; border-radius: 10px; display: flex; justify-content: center; align-items: center; color: #ff0052; font-size: larger; letter-spacing: 5px; box-shadow: inset 20px 20px 20px #0000008c; }
2. Animate the gradient border using the CSS rotate property.
@keyframes rotate { 0%{ transform: rotate(0deg); } 100%{ transform: rotate(-360deg); } }