没办法放gif,可以cv代码自行看特效。
可以自行找轮播插件,包裹p标签实现文字滚动,背景色代码换行了。这个自行处理一下
<style>
#banner {
font-size: 18px;
margin: 50px;
background: -webkit-linear-gradient(left, #ffffff, #ff0000 6.25%, #ff7d00 12.5%, #ffff00 18.75%, #00ff00 25%, #00ffff 31.25%, #0000ff 37.5%, #ff00ff 43.75%, #ffff00 50%, #ff0000 56.25%, #ff7d00 62.5%, #ffff00 68.75%, #00ff00 75%, #00ffff 81.25%, #0000ff 87.5%, #ff00ff 93.75%, #ffff00 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% 100%;
animation: masked-animation 5s infinite linear
}
.box {
background: #000;
}
p {
text-align: center;
background-color: #333;
border-radius: 3px;
box-shadow: 0px 0px 5px #f200ff;
padding: 5px;
}
@keyframes masked-animation {
0% {
background-position: 0 0
}
100% {
background-position: -100%, 0
}
}
</style>
<div class="box">
<p id="banner">大大大大大多无群无多无群群群群群群群群群群群无群二</p>
</div>