文字的跑马灯特效
Posted growupup
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了文字的跑马灯特效相关的知识，希望对你有一定的参考价值。
上学时同学有个来电带跑马灯的手机，可把我羡慕坏了，可等我买的起手机时，跑马灯不流行了，甚伤萝卜心！
今天就用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>
以上是关于文字的跑马灯特效的主要内容，如果未能解决你的问题，请参考以下文章