In the next section, you will find a complete example demonstrating how to create a visually appealing animated border effect around a box. This effect is achieved entirely with HTML and CSS, without the need for JavaScript, allowing you to add dynamic and engaging styling to your designs using only simple front-end code.
<style>
.container{ padding-top: 20px;
padding-bottom: 20px;}
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background: #111845a6;
box-sizing: border-box;
overflow: hidden;
box-shadow: 0 20px 50px rgb(23, 32, 90);
color: white;
padding: 20px;
}.box:before{
content: '';
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background: rgba(255,255,255,0.1);
transition:0.5s;
pointer-events: none;
}.box:hover:before{
left:-50%;
transform: skewX(-5deg);
}
.box .content{
position:absolute;
top:15px;
left:15px;
right:15px;
bottom:15px;
padding:20px;
text-align:center;
box-shadow: 0 5px 10px rgba(9,0,0,0.5);
}.box span{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
box-sizing: border-box;
}.box span:nth-child(1)
{
transform:rotate(0deg);
}.box span:nth-child(2)
{
transform:rotate(90deg);
}.box span:nth-child(3)
{
transform:rotate(180deg);
}.box span:nth-child(4)
{
transform:rotate(270deg);
}.box span:before
{
content: '';
position: absolute;
width:100%;
height: 2px;
background: #50dfdb;
animation: animate 4s linear infinite;
}@keyframes animate {
0% {
transform:scaleX(0);
transform-origin: left;
}
50%
{
transform:scaleX(1);
transform-origin: left;
}
50.1%
{
transform:scaleX(1);
transform-origin: right;
}
100%
{
transform:scaleX(0);
transform-origin: right;
}
}
</style><section>
<div class="container">
<div class="box">
<span></span>
<span></span>
<span></span>
<span></span>
<div class="content">
<p>Test!</p>
</div>
</div>
</div>
</section>