Tạo Hiệu Ứng Trái Tim Đầy Màu Sắc Khi Di Chuột bằng HTML, CSS và Javascript

Xin chào tất cả mọi người,

Trong thế giới phát triển web đầy sáng tạo, việc tạo những hiệu
ứng tương tác độc đáo đã trở thành một phần quan trọng trong việc
tạo ra trải nghiệm độc đáo cho người dùng. Một trong những hiệu
ứng nổi bật là "Tạo Hiệu Ứng Trái Tim Đầy Màu Sắc Khi Di Chuột" -
một cách thú vị để tạo sự tương tác và vui nhộn cho người dùng khi
họ tương tác với trang web.

Bằng việc kết hợp sử dụng HTML, CSS và JavaScript, chúng ta có thể
dễ dàng tạo ra hiệu ứng trái tim đầy màu sắc, đổi màu sắc và phát
ra hiệu ứng hoàn toàn mới khi người dùng di chuột qua. Điều này
không chỉ tạo ra một trải nghiệm thú vị mà còn thể hiện sự linh
hoạt và khả năng sáng tạo trong việc thực hiện các hiệu ứng tương
tác trên trang web.

Dưới đây là một ví dụ về cách tạo hiệu ứng trái tim đầy màu sắc
khi di chuột sử dụng HTML để tạo cấu trúc, CSS để tạo kiểu và động
hoạt, và JavaScript để xử lý sự kiện. Hãy cùng nhau khám phá và
tạo ra những hiệu ứng tương tác thú vị cho các dự án web của bạn!

Các bài viết liên quan:

• 
  Cách làm hiệu ứng Scroll Indicator đơn giản bằng HTML, CSS và
  Javascript 
  


• 
  Cách làm Video Slider đơn giản bằng HTML, CSS và Javascript
  


• 
  Input Validator đơn giản bằng HTML, CSS và Javascript
  


• 
  Animated Login Form đơn giản bằng HTML và CSS
  


• 
  Sticky Header On Scroll đơn giản bằng HTML, CSS và
  Javascript
  

Bước 1: Thêm CSS

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

body {
    background-color: #333;
    height: 100vh;
    overflow: hidden;
}

span {
    position: absolute;
    transform: translate(-50%, -50%);
    background-image: url(heart.png);
    background-size: cover;
    width: 50px;
    height: 50px;
    animation: animate 2s linear infinite;
    pointer-events: none;
}

@keyframes animate {
    0% {
        transform: translate(-50%, -50%);
        opacity: 1;
        filter: hue-rotate(0deg);
    }
    100% {
        transform: translate(-50%, -1000%);
        opacity: 1;
        filter: hue-rotate(720deg);
    }
}

Bước 2: Thêm Javascript

document.addEventListener('mousemove', (e) => {
    const body = document.querySelector('body');
    const heart = document.createElement('span');

    let x = e.offsetX;
    let y = e.offsetY;

    heart.style.left = x + 'px';
    heart.style.top = y + 'px';

    let size = Math.random() * 100;

    heart.style.width = size + 'px';
    heart.style.height = size + 'px';

    setTimeout(() => {
        heart.remove();
    }, 1900);

    body.appendChild(heart);
})

Full tutorial:

Hoàn thành

Tóm lại, việc tạo hiệu ứng trái tim đầy màu sắc khi di chuột không chỉ là
một cách để tạo thêm tính tương tác và vui nhộn cho trang web của bạn, mà
còn thể hiện sự linh hoạt và khả năng tùy chỉnh của bạn trong việc tạo
hiệu ứng độc đáo. Bằng việc kết hợp sử dụng HTML, CSS và JavaScript, bạn
có thể tạo ra những hiệu ứng tương tác tuyệt vời mà không cần phải dựa vào
các thư viện bên ngoài.

Không ngừng khám phá và thử nghiệm, bạn có thể tạo ra những hiệu ứng độc
đáo và phù hợp với phong cách thiết kế của bạn. Hãy thử áp dụng kiến thức
từ bài viết này vào các dự án web của bạn và tạo nên những trải nghiệm
tương tác đáng nhớ cho người dùng. Chúc bạn thành công trong việc tạo hiệu
ứng trái tim và tiếp tục khám phá thêm nhiều ý tưởng sáng tạo khác trong
lĩnh vực phát triển web!