首页 > 开发 > CSS > 正文

CSS3制作炫酷的自定义发光文字

2024-07-11 08:33:10

字体：大中小

来源：转载

供稿：网友

本文为大家分享一款基于纯CSS3的文字发光特效，当我们将鼠标滑过文字时，文字就会模拟发光动画，展现出非常酷的发光画面。另外，由于引用了特殊字体，所以整个文字效果看起来有着3D立体的特效，如果你的网络无法加载这些字体，可能是由于国外的这个网站被墙的缘故，就像google的字体库网址被屏蔽那样。

HTML代码

XML/HTML Code复制内容到剪贴板

<div id="container">
<p><a href="#"> RED
</a></p>
<p><a href="#"> BLUE
</a></p>
<p><a href="#"> Yellow
</a></p>
<p><a href="#"> GREEN
</a></p>
<p><a href="#"> ORANGE
</a></p>
<p><a href="#"> VIOLET
</a></p>
</div>

CSS代码

CSS Code复制内容到剪贴板

/*setup*/ *{
margin: 0; padding: 0;
}
@font-face { font-family: 'Monoton';
font-style: normal; font-weight: 400;
src: local('Monoton'), local('Monoton-Regular'), url(http://themes.googleusercontent.com/static/fonts/monoton/v4/AKI-lyzyNHXByGHeOcds_w.woff) format('woff'); }
@font-face {
font-family: 'Iceland'; font-style: normal;

上一篇：使用CSS媒体查询创建响应式布局教程

下一篇：CSS display属性的table表格布局

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注