本帖最後由 rainbow 於 2018-8-31 09:48 編輯
闪烁字
(此代码只在Chrome浏览器上才能显示闪动效果)
- <p align="center"><span class="blink" >闪烁字</span></p>
- <style type="text/css">@keyframes blink{ 0% { opacity: 1; } 50% { opacity: 1; } 50.01% { opacity: 0; } 100% { opacity: 0; } }
- @-moz-keyframes blink{ 0% { opacity: 1; } 50% { opacity: 1; } 50.01% { opacity: 0; } 100% { opacity: 0; } }
- @-ms-keyframes blink { 0% { opacity: 1; } 50% { opacity: 1; } 50.01% { opacity: 0; } 100% { opacity: 0; } }
- @-o-keyframes blink{ 0% { opacity: 1; } 50% { opacity: 1; } 50.01% { opacity: 0; } 100% { opacity: 0; } } .blink{ animation: blink .2s linear infinite;
- -webkit-animation: blink .2s linear infinite;
- -moz-animation: blink .2s linear infinite;
- -ms-animation: blink .2s linear infinite;
- -o-animation: blink .2s linear infinite; color: #009899;font-size:60px;font-family:Microsoft YaHei;font-weight:bold;letter-spacing:20px; }
- </style>
- <br><br>
複製代碼 |