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 }

 

相关文章