Tạo hiệu ứng nhấp nháy bằng CSS như thế nào?

Thảo luận trong 'Ngôn ngữ lập trình CSS, HTML, HTML5' bắt đầu bởi seolagi, 14/9/21.

  1. seolagi

    seolagi

    Moderator

    Thành viên BQT

    Tham gia ngày:
    16/4/14
    Bài viết:
    812
    Đã được thích:
    70
    Điểm thành tích:
    28
    Hi cho mình xin code css, tạo hiệu ứng nhấp nháy cho button, 1 nút bấm với ạ, mình muốn nó nháy nháy nhẹ nhẹ, cho mọi người thấy rồi, không cần nháy của nhiều. Bạn nào có code nháy nháy bằng css cho mình xin với ạ, cảm ơn
     
    Cảm ơn đã xem bài:

    Tạo hiệu ứng nhấp nháy bằng CSS như thế nào?

  2. admin

    admin Phạm Công Sơn Thành viên BQT

    Tham gia ngày:
    22/5/13
    Bài viết:
    4,485
    Đã được thích:
    1,078
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Code mình tìm được trên mạng xài đang khá ổn bạn tham khảo nhé, nó nháy nháy nhẹ nhàng.
    HTML:
    <button  type="button" class="button">Gửi</button>
    
    Mã CSS
    HTML:
    @-webkit-keyframes glowing {
      0% { background-color: #004A7F; -webkit-box-shadow: 0 0 3px #004A7F; }
      50% { background-color: #0094FF; -webkit-box-shadow: 0 0 10px #0094FF; }
      100% { background-color: #004A7F; -webkit-box-shadow: 0 0 3px #004A7F; }
    }
     
    @-moz-keyframes glowing {
      0% { background-color: #004A7F; -moz-box-shadow: 0 0 3px #004A7F; }
      50% { background-color: #0094FF; -moz-box-shadow: 0 0 10px #0094FF; }
      100% { background-color: #004A7F; -moz-box-shadow: 0 0 3px #004A7F; }
    }
     
    @-o-keyframes glowing {
      0% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; }
      50% { background-color: #0094FF; box-shadow: 0 0 10px #0094FF; }
      100% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; }
    }
     
    @keyframes glowing {
      0% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; }
      50% { background-color: #0094FF; box-shadow: 0 0 10px #0094FF; }
      100% { background-color: #004A7F; box-shadow: 0 0 3px #004A7F; }
    }
     
    .button {
      -webkit-animation: glowing 1500ms infinite;
      -moz-animation: glowing 1500ms infinite;
      -o-animation: glowing 1500ms infinite;
      animation: glowing 1500ms infinite;
    }
    
     


Like và Share ủng hộ ITSEOVN