Animation Border Gradient CSS

Khái quát

Trong lập trình web sẽ không ai xa lạ gì với việc custom tạo màu sắc đường viền cho các element. Tuy nhiên việc custom màu đường viền theo màu gradient thì lại không mấy dể dàng vì không được hổ trợ sẳn mà phải thực hiện thông qua các mẹo khi sử dụng before hay after đè lên element. Đã vậy nếu muốn tạo animation cho nó chuyển động thì khó lại càng khó hơn. Trong bài tập ngày hôm nay hãy cùng mình tạo ra một hiệu ứng animation border gradient trong CSS nhé.

Animation border Gradient trong CSS là hiệu ứng chuyển động sảy ra ở đường viền chứa nhiều màu sắc khác nhau sử dụng HTML và CSS trong lập trình web.

Triển khai

Code HTML


    
    
    
        Lisa
        Lalisa Manobal

Code CSS

@import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap');
    :root{
        --black: #211E32;
        --dark: #2A2F42;
        --green: #5AFE72;
        --white: #ffffff;
        --purple: #9A3BBA;
        --danger: #FE4E56;
        --yellow: #fbff22;
    }
    @property --rotate {
        syntax: "<angle>";
        initial-value: 0deg;
        inherits: false;
    }
    body {
        min-height: 100vh;
        background: var(--black);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
      }
      .card {
        position: relative;
        background: var(--dark);
        width: 300px;
        height: 450px;
        padding: 3px;
        border-radius: 5px;
        margin: 50px;
        transition:  0.5s;
      }
      .card::before,
      .card::after {
        position: absolute;
        width: 104%;
        height: 102%;
        top: -1%;
        left: -2%;
        content: "";
        border-radius: 6px;
        background-image: linear-gradient(
          var(--rotate),
          var(--purple), var(--danger));
        z-index: -1;
        transition: opacity 0.5s;
        animation: none;
        opacity: 0;
      }
      .card::after{
        filter: blur(40px);
      }
      .card:hover::before,
      .card:hover::after{
        opacity: 1;
        animation: spin 1.5s linear infinite;
      }
      
      @keyframes spin {
        0% {
          --rotate: 0deg;
        }
        100% {
          --rotate: 360deg;
        }
      }
      .card img:nth-child(1){
        position: absolute;
        bottom: 2%;
        left: 2%;
        width: 96%;
        height:96%;
        border-radius: 6px;
        object-fit: cover;
        opacity: 1;
        transition: opacity 0.5s ease-in-out;
      }
      .card:hover img:nth-child(1){
        opacity: 0;
      }
      .card img:nth-child(2){
        position: absolute;
        bottom: 0%;
        width: 150%;
        left: 0%;
        transform: translateX(-25%);
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
      }
      .card:hover img:nth-child(2){
        opacity: 1;
      }
      .card .content{
        position: absolute;
        font-size: 40px;
        font-family: 'Sacramento', cursive;
        color: var(--white);
        line-height: .8em;
        top: 70%;
        left: -10px;
        rotate: -10deg;
        text-shadow:  0 0px 10px var(--danger);
        opacity: 0.5s;
      }
      .card:hover .content{
        color: var(--yellow);
        text-shadow:  0 0px 10px var(--purple);
      }
      .card1:hover{
        background-color: transparent;
      }

Property Param CSS

@property --rotate {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

Để có thể thay đổi giá trị một param trong CSS từ CSS ta cần sử dụng property param để triển khai một biến với đầy đủ các thông tin về thuộc tính.

syntax

Thuộc tính syntax quy định cú pháp và giá trị hợp lệ cho biến. Các giá trị cụ thể như sau:

"<number>" giá trị về số.
"<percentage>" giá trị về phần trăm.
"<color>" giá trị về màu sắc.
"<image>" giá trị về hình ảnh.
"<url>" giá trị về đường liên kết.
"<integer>" giá tri về integer.
"<angle>" giá trị về thông số góc.
"<time>" giá trị về thời gian.
"<resolution>" giá trị về độ phân giải.
"<transform-list>" giá trị về các thuộc tính trong transform.

initial-value

Thuộc tính initial-value dùng để khởi tạo giá trị mặc định hay giá trị ban đầu cho một biến.

inherits

Thuộc tính inherits quy định việc biến này được phép kế thừa hay không, tham số là true và false.

Xem video hướng dẩn chi tiết

Xem nhiều hơn tại kênh Youtube Lùn Dev