Hiệu ứng rung lắc tuyệt đẹp cho nút gọi điện

Cập nhật lần cuối 30/01/2024 by trong HTML&CSS vào 27/10/2017 có 8770 Views

Đoạn code sau đơn giản chỉ là HTML và CSS để tạo hiệu ứng rung lắc cho nút gọi điện trên website. Thêm hiệu ứng vào sẽ bắt mắt người dùng hơn và click thích người ta gọi điện hơn 🙂

Chèn code sau xuống footer của website

<a href="tel:xxx" title="Hotline" class="devvn_animation_zoom">
    <img width="32" height="32" src="https://levantoan.com/wp-content/uploads/2017/10/phone-call.png" alt="" loading="lazy">
</a>

Sau đó chèn thêm đoạn Css này

Để duy trì blog nên mình có làm aff cho 1 số bên hosting. Nhưng dù aff mình cũng chọn 1 số nhà cung cấp uy tín về chất lượng và support nên các bạn cứ yên tâm nhé.

Nếu có mua hosting mà có trong list dưới đây các bạn click vào link trước khi mua để ủng hộ mình nhé. Mình cảm ơn nhiều

a.devvn_animation_zoom {
        display: block;
        background: #1cb2ed;
        position: fixed;
        right: 35px;
        top: 50%;
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        padding: 15px;
        z-index: 9999;
        -webkit-animation: devvn_zoom 1.5s infinite linear;
        -moz-animation: devvn_zoom 1.5s infinite linear;
        -o-animation: devvn_zoom 1.5s infinite linear;
        animation: devvn_zoom 1.5s infinite linear;
        box-shadow: 0 0 0 0 #1cb2ed;
    }

    a.devvn_animation_zoom img {
        width: 32px;
        height: 32px;
        -webkit-animation: calltrap_spin 3s infinite linear;
        -moz-animation: calltrap_spin 3s infinite linear;
        -o-animation: calltrap_spin 3s infinite linear;
        animation: calltrap_spin 3s infinite linear
    }
    @-webkit-keyframes devvn_zoom {
        70% {
            box-shadow: 0 0 0 15px transparent
        }
        100% {
            box-shadow: 0 0 0 0 transparent
        }
    }

    @keyframes devvn_zoom {
        70% {
            box-shadow: 0 0 0 15px transparent
        }
        100% {
            box-shadow: 0 0 0 0 transparent
        }
    }

    @-webkit-keyframes calltrap_spin {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg)
        }
        30% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg)
        }
        33% {
            -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg)
        }
        36% {
            -webkit-transform: rotate(10deg);
            transform: rotate(10deg)
        }
        39% {
            -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg)
        }
        42% {
            -webkit-transform: rotate(10deg);
            transform: rotate(10deg)
        }
        45% {
            -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg)
        }
        48% {
            -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
            opacity: 1
        }
        51% {
            -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg)
        }
        54% {
            -webkit-transform: rotate(10deg);
            transform: rotate(10deg)
        }
        57% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg)
        }
    }

    @-moz-keyframes calltrap_spin {
        0% {
            -moz-transform: rotate(0deg);
            transform: rotate(0deg)
        }
        30% {
            -moz-transform: rotate(0deg);
            transform: rotate(0deg)
        }
        33% {
            -moz-transform: rotate(-10deg);
            transform: rotate(-10deg)
        }
        36% {
            -moz-transform: rotate(10deg);
            transform: rotate(10deg)
        }
        39% {
            -moz-transform: rotate(-10deg);
            transform: rotate(-10deg)
        }
        42% {
            -moz-transform: rotate(10deg);
            transform: rotate(10deg)
        }
        45% {
            -moz-transform: rotate(-10deg);
            transform: rotate(-10deg)
        }
        48% {
            -moz-transform: rotate(10deg);
            transform: rotate(10deg);
            opacity: 1
        }
        51% {
            -moz-transform: rotate(-10deg);
            transform: rotate(-10deg)
        }
        54% {
            -moz-transform: rotate(10deg);
            transform: rotate(10deg)
        }
        57% {
            -moz-transform: rotate(0deg);
            transform: rotate(0deg)
        }
    }

    @-o-keyframes calltrap_spin {
        0% {
            -o-transform: rotate(0deg);
            transform: rotate(0deg)
        }
        30% {
            -o-transform: rotate(0deg);
            transform: rotate(0deg)
        }
        33% {
            -o-transform: rotate(-10deg);
            transform: rotate(-10deg)
        }
        36% {
            -o-transform: rotate(10deg);
            transform: rotate(10deg)
        }
        39% {
            -o-transform: rotate(-10deg);
            transform: rotate(-10deg)
        }
        42% {
            -o-transform: rotate(10deg);
            transform: rotate(10deg)
        }
        45% {
            -o-transform: rotate(-10deg);
            transform: rotate(-10deg)
        }
        48% {
            -o-transform: rotate(10deg);
            transform: rotate(10deg);
            opacity: 1
        }
        51% {
            -o-transform: rotate(-10deg);
            transform: rotate(-10deg)
        }
        54% {
            -o-transform: rotate(10deg);
            transform: rotate(10deg)
        }
        57% {
            -o-transform: rotate(0deg);
            transform: rotate(0deg)
        }
    }

    @keyframes calltrap_spin {
        0% {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg)
        }
        30% {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg)
        }
        33% {
            -webkit-transform: rotate(-10deg);
            -moz-transform: rotate(-10deg);
            -o-transform: rotate(-10deg);
            transform: rotate(-10deg)
        }
        36% {
            -webkit-transform: rotate(10deg);
            -moz-transform: rotate(10deg);
            -o-transform: rotate(10deg);
            transform: rotate(10deg)
        }
        39% {
            -webkit-transform: rotate(-10deg);
            -moz-transform: rotate(-10deg);
            -o-transform: rotate(-10deg);
            transform: rotate(-10deg)
        }
        42% {
            -webkit-transform: rotate(10deg);
            -moz-transform: rotate(10deg);
            -o-transform: rotate(10deg);
            transform: rotate(10deg)
        }
        45% {
            -webkit-transform: rotate(-10deg);
            -moz-transform: rotate(-10deg);
            -o-transform: rotate(-10deg);
            transform: rotate(-10deg)
        }
        48% {
            -webkit-transform: rotate(10deg);
            -moz-transform: rotate(10deg);
            -o-transform: rotate(10deg);
            transform: rotate(10deg);
            opacity: 1
        }
        51% {
            -webkit-transform: rotate(-10deg);
            -moz-transform: rotate(-10deg);
            -o-transform: rotate(-10deg);
            transform: rotate(-10deg)
        }
        54% {
            -webkit-transform: rotate(10deg);
            -moz-transform: rotate(10deg);
            -o-transform: rotate(10deg);
            transform: rotate(10deg)
        }
        57% {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg)
        }
    }

Hình ảnh kèm theo

Chúc các bạn có 1 nút gọi điện kèm hiệu ứng tuyệt vời cho website

4.6/5 - (10 votes)
Từ khóa:
  • Bình luận
Sản phẩm nổi bật của Toản
x