1. 程式人生 > >CSS3如何實現div閃爍效果

CSS3如何實現div閃爍效果

效果:

 

Html:

<h1 class="blink">花花世界</h1>

 

Css:

 1 @keyframes fade {
 2             from {
 3                 opacity: 1.0;
 4             }
 5             50% {
 6                 opacity: 0.4;
 7             }
 8             to {
 9                 opacity: 1.0
; 10 } 11 } 12 @-webkit-keyframes fade { 13 from { 14 opacity: 1.0; 15 } 16 50% { 17 opacity: 0.4; 18 } 19 to { 20 opacity: 1.0; 21 } 22 }
23 .blink { 24 color: red; 25 padding: 10px; 26 font-size: 15px; 27 height: 60px; 28 animation: fade 600ms infinite; 29 -webkit-animation: fade 600ms infinite; 30 }