Cách làm hiệu ứng border đẹp mắt bằng HTML và CSS

Cách làm hiệu ứng border đẹp mắt bằng HTML và CSS

Chào mọi người!

Hôm nay, chúng ta sẽ bắt đầu một cuộc hành trình thú vị vào thế giới của HTML và CSS để tạo ra một hiệu ứng viền hoạt hình (animated border effect) độc đáo. Đây là một cách tuyệt vời để làm cho các phần tử trên trang web của bạn trở nên sống động và nổi bật. Bạn có thể sử dụng hiệu ứng này để làm nổi bật các phần tử như hình ảnh, nút, hoặc tiêu đề.

Chúng ta sẽ sử dụng ngôn ngữ lập trình HTML để xây dựng cấu trúc của trang web và sử dụng CSS để thêm hiệu ứng viền hoạt hình cho các phần tử của chúng ta. Không cần kiến thức lập trình chuyên sâu, bạn có thể theo dõi và thực hiện theo từng bước một.

Hãy bắt đầu cuộc hành trình và khám phá cách tạo ra hiệu ứng viền hoạt hình đẹp mắt bằng HTML và CSS!

Bước 1: Thêm HTML


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Border Animation Effect</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>  
    <div class="container">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <div class="content"></div>
    </div>
  </body>
</html>

Bước 2: Thêm CSS


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #242424;
}

.container {
    position: relative;
    height: 400px;
    width: 400px;
    padding: 4px;
    background-color: #222;
    border-radius: 16px;
    overflow: hidden;
}

.container .content {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #222;
    border-radius: 16px;
    z-index: 10;
}

.container span {
    position: absolute;
    inset: -100px;
    z-index: 5;
}

.container span:nth-child(1) {
    background: conic-gradient(transparent, 
        transparent, transparent, #0079FF);
    filter: blur(8px);
    animation: rotation 4s linear infinite;
}

.container span:nth-child(2) {
    background: conic-gradient(transparent, 
        transparent, transparent, #00DFA2);
    filter: blur(8px);
    animation: rotation 4s linear infinite;
    animation-delay: -1s;
}

.container span:nth-child(3) {
    background: conic-gradient(transparent, 
        transparent, transparent, #F6FA70);
    filter: blur(8px);
    animation: rotation 4s linear infinite;
    animation-delay: -2s;
}

.container span:nth-child(4) {
    background: conic-gradient(transparent, 
        transparent, transparent, #FF0060);
    filter: blur(8px);
    animation: rotation 4s linear infinite;
    animation-delay: -3s;
}

@keyframes rotation {
    0% {
        transform:rotate(0deg);
    }

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

Full tutorial:


Hoàn thành

Cuối cùng, chúng ta đã hoàn thành hướng dẫn về cách tạo hiệu ứng viền hoạt hình bằng HTML và CSS. Điều quan trọng là thực hành và tùy chỉnh hiệu ứng này để phù hợp với ý tưởng của bạn và phong cách thiết kế trang web của bạn.

Nếu bạn đã theo dõi từng bước trong hướng dẫn này, bạn sẽ hiểu cách sử dụng các thuộc tính CSS như @keyframes, animation, border để tạo ra hiệu ứng động ấn tượng. Hãy thử nghiệm và tạo ra những hiệu ứng độc đáo của riêng bạn để làm cho trang web của bạn trở nên thú vị hơn.

Nhớ rằng, việc học và phát triển kỹ năng trong lĩnh vực phát triển web là một quá trình liên tục. Đừng ngần ngại thử nghiệm, khám phá và tạo ra những dự án thú vị mới. Chúc bạn thành công và hy vọng bạn tận hưởng việc sáng tạo trong thế giới của HTML và CSS!

Cảm ơn bạn đã tham gia cùng chúng tôi trong hướng dẫn này. Nếu bạn có bất kỳ câu hỏi hoặc muốn chia sẻ kết quả của bạn, xin vui lòng để lại bình luận. Chúng tôi luôn sẵn sàng giúp đỡ. Chúc mọi người một ngày tốt lành và hẹn gặp lại trong những hướng dẫn khác!

No comments:

Powered by Blogger.