上学时同学有个来电带跑马灯的手机，可把我羡慕坏了，可等我买的起手机时，跑马灯不流行了，甚伤萝卜心！
今天就用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>
原文地址：https://www.cnblogs.com/growupup/p/9981553.html
时间： 2024-08-29 07:29:22