CSS Glitch Hover Effects - HTML CSS Image Hover Effects

Trong bài viết này mình sẽ hướng dẫn các bạn làm Glitch Hover bằng CSS3 đơn giản.
CSS Glitch Hover Effects - HTML CSS Image Hover Effects

Giới thiệu

Hôm nay mình chia sẻ cho các bạn một hiệu ứng thích hợp dùng trong trang "404" hoặc trang "Comming soon" để giới thiệu sản phẩm thêm phần ấn tượng.

Chỉ cần các bạn biết một ít kiến thức cơ bản là có thể thực hiện được hiệu ứng website đơn giản này rồi đó!!!

Thực hiện

Đây là hiệu ứng được xây dựng thuần CSS bằng cách dùng các thuộc tính animations của HTML5/CSS3

Chủ yếu ta dùng thuộc tính "backgroud-image" để xây dựng hiệu ứng này. Và điểm chú ý là ta sẽ vận dụng:

- filter:hue-rotate(0deg): Áp dụng một xoay màu sắc trên hình ảnh. Giá trị xác định số độ xung quanh vòng tròn màu mà các mẫu hình ảnh sẽ được điều chỉnh. 0deg là mặc định và đại diện cho hình ảnh gốc. Lưu ý: Giá trị tối đa là 360deg.

Để tạo độ ảo cho hiệu ứng.

Kết

Bạn thấy không rất đơn giản để chúng ta tạo ra các hiệu ứng đẹp mắt cho website. Bạn muốn kham thảo hơn các hiệu ứng khác thì hãy ghé qua Boldman nhé.

Hãy để lại comment mình sẽ giải đáp thắc mắc của các bạn sớm nhất.

Nếu bạn thích thì có thể like ngược lại thì dislike đều là động lực rất lớn cho mình.

P/s: Make simple, make easy, make beauty

<a id="item-bg" href="javascript:" style="background-image: url(https://www.boldman.vn/wwwroot/templates/website/global/img/background.jpg);">
</a>

#item-bg {
    position: relative;
    width: 100%;
    height: 100vh;
    display: block;
    background-size: cover;
    background-position: center center;
    &:before {
        content: "";
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center center;
        background-image: url(https://www.boldman.vn/wwwroot/templates/website/global/img/background.jpg);
        opacity: .5;
        mix-blend-mode:hard-light; 
    }
    &:hover:before {
        -webkit-animation: effect  .2s linear infinite;
                animation: effect  .2s linear infinite;
    }
}
@-webkit-keyframes effect {
    0% {
        background-position: 0 0;
        -webkit-filter:hue-rotate(0deg);
                filter:hue-rotate(0deg);
    }
    10% {
        background-position: 5px 0;
    }
    20% {
        background-position: -5px 0;
    }
    30% {
        background-position: 15px 0;
    }
    40% {
        background-position: -5px 0;
    }
    50% {
        background-position: -25px 0;
    }
    60% {
        background-position: -50px 0;
    }
    70% {
        background-position: 0px -20px;
    }
    80% {
        background-position: -60px -20px;
    }
    81% {
        background-position: 0px 0px;
    }
    100% {
        background-position: 0px 0px;
        -webkit-filter:hue-rotate(100deg);
                filter:hue-rotate(100deg);
    }
}
@keyframes effect {
    0% {
        background-position: 0 0;
        -webkit-filter:hue-rotate(0deg);
                filter:hue-rotate(0deg);
    }
    10% {
        background-position: 5px 0;
    }
    20% {
        background-position: -5px 0;
    }
    30% {
        background-position: 15px 0;
    }
    40% {
        background-position: -5px 0;
    }
    50% {
        background-position: -25px 0;
    }
    60% {
        background-position: -50px 0;
    }
    70% {
        background-position: 0px -20px;
    }
    80% {
        background-position: -60px -20px;
    }
    81% {
        background-position: 0px 0px;
    }
    100% {
        background-position: 0px 0px;
        -webkit-filter:hue-rotate(100deg);
                filter:hue-rotate(100deg);
    }
}

0 thảo luận về CSS Glitch Hover Effects - HTML CSS Image Hover Effects

comment_blank
Hãy để lại #comment của bạn mình sẽ giải đáp thắc mắc một cách sớm nhất có thể.

Bài viết cùng chuyên mục