^

Animated Border Box with CSS

Article 142 in CSS

2021-08-02 01:38:52 from bugfish
Animated Border Box with CSS
CSS / Hints
Last Review on: 2021-09-23 14:37:02 | Hits: 72

Code for an Animated Border on a Box, only with CSS and HTML used!

<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>

 

I do not guarantee the reliability of the information given here, the code described on this page is executed at your own risk and in the event of damage or other unforeseeable consequences I am in no way responsible or liable.
Currently 0 Upvotes!
captcha image
System - 2021-08-02 01:38:55
We appreciate comments on our site!

Theme
27/25
This Website is using Session Cookies for Site Functionality and AWStats.