Tạo Breathing Animation Bằng HTML CSS Phần

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo hiệu ứng breathing animation bằng HTML, CSS cho trang web nhé!

Trong bài này mình sẽ chú trọng vào việc thực hành do đó nếu bạn muốn tham khảo phần định nghĩ css animation thì có thể xem đường dẫn bên dưới nhé!
Tạo chuyển động animation trong CSS3

Tạo Cấu Trúc Phần Tử Breathing Animation

Phần đầu tiên chúng ta sẽ đi vào tạo hai file là index.html(nơi lưu trữ HTML) và style.css(nơi lưu trữ mã CSS). Sau đó liên kết chúng với nhau thông qua đoạn mã dưới đây nhé:

HTML

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Cách Tạo Breathing Animation HTML CSS</title>
      <link rel="stylesheet" href="style.css">
  </head>
  <body>
  </body>
  </html>

Thêm Phần Tử HTML Và CSS Breathing Animation

Phần tiếp theo chúng ta sẽ đi vào thêm phần tử HTML cho hiệu ứng này. Đồng thời sử dụng một số thuộc tính CSS để căn chỉnh vị trí phần tử trong trang web. Để hiểu rõ hơn bạn xem đoạn mã bên dưới nhé:

HTML

<div class="container"></div>

CSS

body{
     margin: 0;
     padding: 0;
     background: #e3e5e8;
 }
.container{
     position: absolute;
     top: 50%;
     left: 50%;
     transform:  translate(-50%, -50%);
     width: 200px;
     height: 200px;
     border-radius: 50%;
     background: url(https://images.pexels.com/photos/2787341/pexels-photo-2787341.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
     background-size: cover;
     animation: animate 5s linear infinite; 
 }

Và kết quả bạn xem hình ảnh bên dưới nhé:

Tạo Hiệu Ứng Breathing Animation Bằng CSS

Phần cuối cùng chúng ta sẽ đi vào tạo hiệu ứng này bằng cách việc kết hợp hai thuộc tính CSS là @keyframes và box-shadow. Để hiểu rõ hơn bạn xem đoạn mã sau nhé:

CSS

@keyframes animate{
     0%{
         box-shadow: 0 0 0 15px rgba(0,0,255,0.1)
         ,0 0 0 30px rgba(0,0,255,0.1)
         ,0 0 0 45px rgba(0,0,255,0.1)
         ,0 0 0 60px rgba(0,0,255,0.1)
         ,0 0 0 70px rgba(0,0,255,0.1);
     }
     50%{
         box-shadow: 0 0 0 25px rgba(0,0,255,0.1)
         ,0 0 0 50px rgba(0,0,255,0.1)
         ,0 0 0 75px rgba(0,0,255,0.1)
         ,0 0 0 100px rgba(0,0,255,0.1)
         ,0 0 0 125px rgba(0,0,255,0.1);
     }
     100%{
         box-shadow: 0 0 0 15px rgba(0,0,255,0.1)
         ,0 0 0 30px rgba(0,0,255,0.1)
         ,0 0 0 45px rgba(0,0,255,0.1)
         ,0 0 0 60px rgba(0,0,255,0.1)
         ,0 0 0 70px rgba(0,0,255,0.1);
     }
 }

Và kết quả bạn xem video bên dưới nhé:

Và đây là đoạn mã của dự án này trên Codepen nhé:

See the Pen Hiệu Ứng Breathing Animation by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những kiến thức để tạo breathing animation hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Tạo Breathing Animation Bằng HTML CSS Phần