Làm thế nào để bạn nhấp nháy hình ảnh?

Question

Tôi đã tự hỏi làm thế nào để làm cho một hình ảnh nhấp nháy trong CSS, nếu có thể. Tôi muốn có nó nhấp nháy nó ở đâu.

Tôi cũng muốn thay đổi tốc độ nhưng chủ yếu là tôi muốn làm cho nó nhấp nháy.

Answer 1

sử dụng phương pháp setInterval của javascript sử dụng nó như một tài liệu tham khảo của W3Schools và sau đó thay đổi css từ visibility:visible để visiblity:hidden chúng tôi sẽ không sử dụng display:none vì nó sẽ loại bỏ các không gian của hình ảnh cũng nhưng chúng tôi cần không gian cho hình ảnh cho việc nhấp nháy để hoạt động.

Answer 2

Hoạt ảnh CSS để giải cứu!

@keyframes blink { 
    0% { 
     opacity: 1; 
    } 
    50% { 
     opacity: 0; 
    } 
    100% { 
     opacity: 1; 
    } 
} 
img { 
    animation: blink 1s; 
    animation-iteration-count: infinite; 
} 

http://jsfiddle.net/r6dje/

Bạn có thể làm cho nó một chớp sắc nét bằng cách điều chỉnh khoảng thời gian:

@keyframes blink { 
    0% { 
     opacity: 1; 
    } 
    49% { 
     opacity: 1; 
    } 
    50% { 
     opacity: 0; 
    } 
    100% { 
     opacity: 0; 
    } 
} 

http://jsfiddle.net/xtJF5/1/

Answer 3

Bạn có thể làm điều đó với CSS một cách dễ dàng. Chỉ cần thêm bên dưới mã trình duyệt chéo trong phần tử CSS của hình ảnh của bạn. Bạn cũng có thể đặt thời gian nếu bạn thay đổi chữ số trong mã.

-webkit-transition:all 1s ease-in-out; 
-o-transition:all 1s ease-in-out; 
-ms-transition:all 1s ease-in-out; 
transition:all 1s ease-in-out; 
-webkit-animation:blink normal 2s infinite ease-in-out; 
-ms-animation:blink normal 2s infinite ease-in-out; 
animation:blink normal 2s infinite ease-in-out;