HTML & CSS

Animated Rainbow Border

Animated Rainbow Border – Bootstrap5

HTML

<!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>
    <link rel="stylesheet" href="main.css">
</head>
<body>
 
<div class="contents overflow-hidden bg-success">
  <div class="container d-flex justify-content-center align-items-center h-100">

    <div class="section">
      <div class="row row-cols-md-2 row-cols-lg-4 row-cols-1 Mreflect">
          <div class="p-1">
            <div class="card Mscale overflow-hidden Ranimate" style="width: 18rem;">
              <div class="overflow-hidden">
                <img src="images/1.jpg" class="card-img-top Mscale" alt="...">
              </div>
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </div>
      </div>

    </div>

  </div>

</div>


<div class="contents overflow-hidden bg-success">
  <div class="container d-flex justify-content-center align-items-center h-100">

    <div class="section">
      <div class="row row-cols-md-4 row-cols-sm-2 row-cols-1 Mreflect">
          <div class="p-1">
            <div class="card Mscale overflow-hidden Rrotate" style="width: 18rem;">
              <div class="overflow-hidden">
                <img src="images/1.jpg" class="card-img-top Mscale" alt="...">
              </div>
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </div>
          <div class="p-1">
            <div class="card Mscale overflow-hidden Rrotate" style="width: 18rem;">
              <div class="overflow-hidden">
                <img src="images/2.jpg" class="card-img-top Mscale" alt="...">
              </div>
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </div>
          <div class="p-1">
            <div class="card Mscale overflow-hidden Rrotate" style="width: 18rem;">
              <div class="overflow-hidden">
                <img src="images/3.jpg" class="card-img-top Mscale" alt="...">
              </div>
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </div>
          <div class="p-1">
            <div class="card Mscale overflow-hidden Rrotate" style="width: 18rem;">
              <div class="overflow-hidden">
                <img src="images/4.jpg" class="card-img-top Mscale" alt="...">
              </div>
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
            </div>
          </div>
      </div>

    </div>

  </div>

</div>


    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>    
</body>
</html>

SCSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

$font-family-base: 'Montserrat',
sans-serif;



$primary: #ff9900;
$secondary: #c00000;
$success: #bdbdbd;
//$info:          #c5c5c5;
// $warning:       $yellow;
// $danger:        $red;
// $light:         $gray-100;
// $dark:          $gray-900;






$btn-focus-width:             0;
// $btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;

$card-border-width:                 0;

@import "./node_modules/bootstrap/scss/bootstrap";


$rainbow : linear-gradient(
    #ff0000 0,
    #ff5100 14%,
    #fbff00 28%,
    #1eff00 42%,
    #006eff 56%,
    #1100ff 70%,
    #9900ff 84%,
    #ff0000 100%
);

$RBorder_Size : 4px;
.contents{
    height: 100vh;

    .section{
        .card{
            border-radius: $RBorder_Size ;
            padding: 20px;

            &::before{
                content: '';
                position: absolute;
                z-index: -2;
                left: -50%;
                top: -50%;
                width: 200%;
                height:200%;
                background: $rainbow;
                background-size: 50% 50%;
            }

            &::after{
                content: '';
                position: absolute;
                z-index: -1;
                left : $RBorder_Size;
                top : $RBorder_Size;
                width: calc(100% - #{$RBorder_Size}*2); 
                height: calc(100% - #{$RBorder_Size}*2); 
                background-color: white;
                border-radius: $RBorder_Size;
            }
        }
    }

}


.Mreflect{
    -webkit-box-reflect: below -4px linear-gradient(transparent 70%, rgba(255,255,255,0.4));
}

.Mscale{
    transition: .5s cubic-bezier(0.7, -0.7, 0.2, 1.8);
    &:hover {
        transform: scale(1.2);
        z-index: 300;
        cursor: pointer;
    }
}

.Ranimate{
    &::before {
        transform: rotate(-45deg) scale(1.5);
        animation: animate 6s linear infinite;
    }
}

@keyframes animate {
    from{
        background-position: 0;
    }
    to {
        background-position: 0 1000px;
    }
}

.Rrotate{
    &::before{
        animation: rotate 4s linear infinite;
    }
}

@keyframes rotate {
    100%{
        transform: rotate(360deg);
    }
}

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다