我最近看见鹏博客上的头顶字母移动效果不错有很多人在群内问我这个如何做到的,这个我看了一下还挺美观,所以这期我来出个教程
首先这个代码并不是完全仿阿鹏的那个,他那个有字母闪动我还没有弄明白这个怎么做到的所以我只能尽力还原了希望一下代码能够帮到你
#nr{
font-size:20px;
margin: 0;
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 2s infinite linear;
}
@keyframes masked-animation {
0% {
background-position: 0 0;
}
100% {
background-position: -100%, 0;
}
}
我的字体是接近黑色的剩下由你们来开发吧
若有侵权或者违规内容,请联系站长删除。
资源仅供本地交流学习,请勿商用,如违反,和本资源网无关,使用者承担一切责任
请登录后发表评论
注册