CSS字体霓虹和文本颜色渐变

最新推荐文章于 2025-05-19 09:06:42 发布

easyboot

最新推荐文章于 2025-05-19 09:06:42 发布

阅读量223

点赞数

CC 4.0 BY-SA版权

分类专栏： # CSS WEB前端文章标签： css safari css3

本文链接：https://blog.youkuaiyun.com/easyboot/article/details/125222008

WEB前端同时被 2 个专栏收录

112 篇文章

订阅专栏

CSS

3 篇文章

订阅专栏

这篇博客介绍了如何在ASP.NET Core的网页中使用CSS实现文本颜色的渐变效果。通过定义@@keyframes规则，创建了一个从红色到蓝色的颜色变化动画。同时，展示了如何为元素应用动画效果，例如在一个带有nihong和FontColorGradualChange类的<span>元素中，实现了背景颜色从红色渐变为其他颜色的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.CSS样式内容，我用的是asp.net core 开发。所以@@keyframes关键字有两个@@符号，

<style>
.nihong{ /* 深色底色，浅色文字，多层浅色文字阴影，弥散大 */ 
    background-color: darkgray; 
    color: white; 
    text-shadow: 0px 0px 15px #00FFFF,0px 0px 15px #00FFFF,0px 0px 15px #00FFFF;
}

.FontColorGradualChange
{
	width:300px;
	height:200px;
	background:red;
	animation:mymove 2s infinite;
	/*Safari 和 Chrome:*/
	-webkit-animation:mymove 5s infinite;
}

@@keyframes mymove
	{
	from {color:red;}
	to {color:blue;}
}

/*Safari 和 Chrome:*/
@@-webkit-keyframes mymove
{
	from {color:red;}
	to {color:blue;}
}
</style>

2.使用

 <span class="nihong FontColorGradualChange">测试文字</span>