文字的跑馬燈特效
阿新 • • 發佈：2018-11-19
posit html 100% ans 1.5 keyframes () tle linear
上學時同學有個來電帶跑馬燈的手機，可把我羨慕壞了，可等我買的起手機時，跑馬燈不流行了，甚傷蘿蔔心！
今天就用CSS做個文字的跑馬燈特效，緬懷一下本蘿蔔逝去的青春！
道具：會敲代碼的巧手、七竅玲瓏心、會辯色的睿智雙眼
原理：文字底部放張背景圖，文字color設為透明(color:tranparent;)，設置漸變色背景圖(
background-image: -webkit-linear-gradient(left,#3498db,#f47920 10%,#d71345 20%,#f7acbc 30%,#ffd400 40%,#3498db 50%,#f47920 60%,#d71345 70%,#f7acbc 80%,#ffd400 90%,#3498db);
)，設置背景的繪制區域為text(-webkit-background-clip:text;),然後使用動畫不停移動背景圖
bingo!!!!
效果圖
代碼
<html> <head> <meta charset="UTF-8"> <!--<script>less.watch();</script>--> <style> .title { display: block; text-decoration: none; text-align: center; line-height: 1.5; margin: 20px 0px; background-image: -webkit-linear-gradient(left,#3498db,#f47920 10%,#d71345 20%,#f7acbc 30%,#ffd400 40%,#3498db 50%,#f47920 60%,#d71345 70%,#f7acbc 80%,#ffd400 90%,#3498db); color: transparent; -webkit-background-clip: text; background-size: 200% 100%; -webkit-animation: slide 2s infinite linear; animation: slide 5s infinite linear; font-size: 40px; } @keyframes slide { 0% { background-position: 0 0; } 100% { background-position: -100% 0; } } </style> </head> <body> <p class="title"> 為了引起你的註意，我真是煞費苦心 </p> </body> </html>
文字的跑馬燈特效