首页 前端知识 HTML动态彩虹字

HTML动态彩虹字

2024-04-29 12:04:45 前端知识 前端哥 777 421 我要收藏

效果:

HTML: 

<div class="this-div">Elegant and Beautiful</div>

CSS:

.this-div{
	background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    -webkit-animation:  maskedAnimation 4s infinite linear;
    font-size: 18px;
}
 
@keyframes maskedAnimation {
	0% {
    background-position: 0 0;
	}
	100% {
	    background-position: -100% 0;
	}
}

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6515.html
标签
评论
发布的文章

什么是JSON 为什么使用它

2024-05-07 13:05:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!