如何用css弄个七彩,CSS实现文字七彩呼吸灯动画

CSS实现文字七彩呼吸灯动画

CSS代码(里面渐变颜色可以自己修改)

.name{

font-size:50px;

background-clip: border-box;

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

color: #FF512F;

font-weight: 700;

text-shadow: 0px 0px 7px #ffd800;

background-image: linear-gradient(90deg, #ffd800 0%, #ff512f 100%, #fff);

animation: glow-animation 2s infinite linear;

color: #FFC0CB;

box-sizing: border-box;

vertical-align: inherit;

}

@keyframes glow-animation{

0%{filter:hue-rotate(-360deg)}

100%{filter:hue-rotate(360deg)}

}.jb{

font-size: 16px;

background-image: -webkit-linear-gradient(90deg, #4e17df, #fb6bea 25%, #4e17df 50%, #fb6bea 75%, #4e17df);

-webkit-text-fill-color: transparent;

-webkit-background-clip: text;

background-size: 100% 600%;

animation: jb 10s linear infinite;

}

@keyframes jb {

0% {

background-position: 0 0;

}

100% {

background-position: 0 -300%;

}

}

然后在你的标签里加入class="jb",例如

欢迎来到MDP BLOG!

下面是演示

欢迎来到MDP BLOG!