CSS 逐字高亮效果
本章節分享一段程式碼例項,它實現了字串逐字高亮效果。
特別說明:為了演示效果,將逐字高亮效果的時間設定的較長,可以自行調節。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> html, body{ background-color: #aaa; } p span{ animation: loading 12s; animation-iteration-count: infinite; } @keyframes loading{ 0% {color: black;} 75% {color: black;} 100% {color: white;} } .word1{ animation-delay:-12s; } .word2{ animation-delay:-10s; } .word3{ animation-delay:-8s; } .word4{ animation-delay:-6s; } .word5{ animation-delay:-4s; } .word6{ animation-delay:-2s; } .word7{ animation-delay:0s; } </style> </head> <body> <div style="width:200px;margin:0 auto;"> <p> <span class="word1">L</span> <span class="word2">O</span> <span class="word3">A</span> <span class="word4">D</span> <span class="word5">I</span> <span class="word6">N</span> <span class="word7">G</span> </p> </div> </body> </html>
上面程式碼實現了逐字高亮效果,下面介紹一下它的實現過程。
一.程式碼註釋:
[CSS] 純文字檢視 複製程式碼html, body{ background-color: #aaa; }
設定灰色背景顏色。
[CSS] 純文字檢視 複製程式碼p span{ animation: loading 12s; animation-iteration-count: infinite; }
對span元素應用動畫效果,各個屬性的具體用法可以參閱相關閱讀。
[CSS] 純文字檢視 複製程式碼@keyframes loading{ 0% {color: black;} 75% {color: black;} 100% {color: white;} }
通過@keyframes規定在不同的時間段所要執行的動畫效果。
[CSS] 純文字檢視 複製程式碼.word1{ animation-delay:-12s; } .word2{ animation-delay:-10s; }
通過對 animation-delay 負值的應用,實現逐個高亮效果,每一個時刻只有一個文字是高亮。
二.相關閱讀:
(1).animation 參閱 CSS animation 一章節。
(2).animation-iteration-count 參閱 CSS animation-iteration-count 一章節。
(3).@keyframes 參閱 CSS @keyframes 一章節。
(4).animation-delay 參閱 CSS animation-delay 一章節。
相關文章
- CSS3字串逐字高亮效果CSSS3字串
- css實現的滑鼠滑過星星高亮效果CSS
- JavaScript當前tr行高亮效果JavaScript
- JavaScript 搜尋關鍵字高亮效果JavaScript
- jquery搜尋關鍵詞高亮效果jQuery
- javascript搜尋關鍵字高亮效果JavaScript
- 滑鼠放在圖片實現高亮效果
- css3實現滑鼠懸浮圖示旋轉高亮效果程式碼例項CSSS3
- Jquery實現的高亮效果程式碼分享jQuery
- JavaScript 方向鍵切換表格tr行高亮效果JavaScript
- 當前文字框高亮效果程式碼例項
- JavaScript實用的表格行滑鼠點選高亮效果JavaScript
- CSS:遮罩效果、陰影效果、毛玻璃效果CSS遮罩
- C++逐字輸出函式C++函式
- js實現的指定區域可編輯高亮效果JS
- CSS div居中效果CSS
- CSS 對勾效果CSS
- css翻頁效果CSS
- 滑鼠懸浮實現當前圖片高亮效果詳解
- css 實現打分效果CSS
- CSS字串首字下沉效果CSS字串
- CSS3象棋效果CSSS3
- CSS細線表格效果CSS
- CSS 細線表格效果CSS
- CSS能做出的效果CSS
- 純CSS 毛玻璃效果CSS
- jQuery滑鼠懸浮當前圖片高亮其他圖片灰暗效果jQuery
- js table滑鼠懸浮當前行高亮和切換資料效果JS
- CSS3 文字效果CSSS3
- CSS 彎彎的月亮效果CSS
- CSS3空心圓效果CSSS3
- CSS3呼吸燈效果CSSS3
- 純css模擬下雪效果CSS
- CSS3 矩形切角效果CSSS3
- CSS實現鏤空效果CSS
- CSS圓形圖片效果CSS
- CSS 如何實現羽化效果?CSS
- CSS div居中效果程式碼CSS