将下方HTML和CSS代码复制,放置网站公共底部即可。
HTML部分
<div class="gundongtiao"></div>
css部分
/*顶部彩色长条*/
.gundongtiao{
animation: gundongtiao 1s infinite linear;
height:3px;
top:0;
left:0;
position: fixed;
width:100%;
z-index:9999;
}
@keyframes gundongtiao{
0%{
background: #000 linear-gradient(to left, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
}
20%{
background: #000 linear-gradient(to left, #ff2d55,#4cd964, #5ac8fa, #007aff, #34aadc,#5856d6);
}
40%{
background: #000 linear-gradient(to left, #5856d6,#ff2d55,#4cd964, #5ac8fa, #007aff, #34aadc);
}
60%{
background: #000 linear-gradient(to left, #34aadc,#5856d6,#ff2d55,#4cd964, #5ac8fa, #007aff);
}
80%{
background: #000 linear-gradient(to left, #007aff,#34aadc,#5856d6,#ff2d55,#4cd964, #5ac8fa);
}
100%{
background: #000 linear-gradient(to left, #5ac8fa,#007aff,#34aadc,#5856d6,#ff2d55,#4cd964);
}
}
评论 (0)