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
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,047
    Đã được thích:
    81
    Điểm thành tích:
    48
    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
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,997
    Đã được thích:
    1,216
    Đ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;
    }
    
     


Chủ để tương tự : Tạo hiệu
Diễn đàn Tiêu đề Date
Ngôn ngữ lập trình CSS, HTML, HTML5 Tạo ảnh bìa thumbnail image cho video trong HTML5 như thế nào? 9/11/21
Ngôn ngữ lập trình CSS, HTML, HTML5 Download và cách sử dụng font awesome tạo icon cho website 28/9/16
Ngôn ngữ lập trình CSS, HTML, HTML5 B7: Tự tạo teamplate khung website bằng css căn bản 7/1/16
Ngôn ngữ lập trình CSS, HTML, HTML5 B5: Tạo trang đăng ký với các thuộc tính căn bản trong html5 10/12/15
Ngôn ngữ lập trình CSS, HTML, HTML5 Thuộc tính tạo đường viền cong bo tròn cho border css trong html 1/10/14