CSS3文字不斷流光滑過效果
分享一段程式碼例項,它利用css3實現了流光滑過文字的效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> p { width: 50%; margin: 0 auto; line-height: 50px; font-size: 50px; text-align: center; /*按文字裁剪*/ -webkit-background-clip: text; /*文字的顏色使用背景色*/ -webkit-text-fill-color: transparent; /*設定一個背景色*/ background-color: #19385c; /*設定漸變的背景,按對角線漸變*/ background-image:-webkit-linear-gradient(-45deg,rgba(0,0,0,0.6) 30%,#aff0ff 50%,rgba(0,0,0,0.6) 70%); background-size: 200%; /*給背景新增動畫改變位置*/ -webkit-animation: shine 4s infinite; } @keyframes shine { from { background-position: 100%; } to { background-position: 0; } } </style> </head> <body> <p>螞蟻部落</p> </body> </html>
上面的程式碼實現了我們的要求,程式碼根本無從分析,關鍵在於對於相關css3屬性的理解。
相關閱讀:
(1).background-clip屬性參閱background-clip一章節。
(2).text-fill-color參閱CSS text-fill-color一章節。
(3).linear-gradient參閱CSS3 linear-gradient線性漸變一章節。
(4).animation參閱CSS3 animation一章節。
(5).@keyframes參閱CSS3 @keyframes一章節。
相關文章
- jQuery不斷閃動的文字效果jQuery
- CSS3 方塊不間斷彈跳效果CSSS3
- CSS3 文字效果CSSS3
- css3實現不斷延長的斜線效果CSSS3
- CSS3花屏文字效果CSSS3
- CSS3文字模糊效果CSSS3
- CSS3 文字立體凸起效果CSSS3
- CSS3文字豎排效果CSSS3
- CSS3文字閃爍效果CSSS3
- CSS3 文字立體翻轉效果CSSS3
- js實現的單行文字不間斷無縫滾動效果JS
- CSS3帶有倒影的文字效果CSSS3
- css3過渡效果詳解CSSS3
- CSS3文字動態填充背景效果CSSS3
- CSS3文字顏色漸變效果CSSS3
- CSS3文字凹凸效果程式碼例項CSSS3
- CSS3文字的描邊鏤空效果CSSS3
- css3實現的文字無法選中效果CSSS3
- CSS3文字陰影效果程式碼例項CSSS3
- css3文字鏤空效果程式碼例項CSSS3
- CSS3 文字字型顏色動態漸變效果CSSS3
- CSS3實現的文字框陰影發光效果CSSS3
- CSS3文字漸現效果程式碼例項CSSS3
- CSS3實現文字過渡移動CSSS3
- css3實現滑鼠懸浮文字水平晃動效果CSSS3
- css3實現的文字陰影效果程式碼例項CSSS3
- CSS3滑鼠懸停圖片動畫 多種文字動畫效果CSSS3動畫
- CSS3滑過光束效果程式碼例項CSSS3
- Js+CSS間斷和不間斷文字滾動程式碼JSCSS
- css3實現的文字下滑出現效果程式碼例項CSSS3
- css3實現的文字顏色漸變和漸隱效果CSSS3
- CSS3象棋效果CSSS3
- css3學習總結5--CSS3文字效果CSSS3
- 微信小程式過長文字摺疊效果的探索微信小程式
- css li元素中的文字超出隱藏不換行效果CSS
- css3實現滑鼠劃過圖片具有閃光效果CSSS3
- CSS3空心圓效果CSSS3
- CSS3呼吸燈效果CSSS3