纯css3艺术文字样式效果代码

全栈程序员-站长 • 2021年12月21日下午8:00 • 未分类 • 阅读 41

大家好，又见面了，我是全栈君，今天给大家准备了Idea注册码。

此处内容已经被作者隐藏，请输入验证码查看内容

请关注本站微信公众号，回复“验证码”，获取验证码。在微信里搜索“全栈程序员社区”或者“www_javaforall_cn”或者微信扫描右侧二维码都可以关注本站微信公众号。

效果：http://hovertree.com/texiao/css3/1/

本效果主要使用text-shadow实现.
参考：http://hovertree.com/h/bjaf/css3_text_effect.htm

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超炫CSS3文字特效集锦DEMO演示 - 何问起</title>
<link rel="stylesheet" href="http://hovertree.com/texiao/css3/1/css/style.css" media="screen" type="text/css" />
</head>
<body>
<!--For Firefox-->
<style>a{color:blue}
.test:after {
filter: url(#light-top);
}

.dilate:before {
filter: url(#dilate10);
}

.dilate:after {
filter: url(#dilate6);
}

.erode:after {
filter: url(#erode2);
}

.distant1:after {
filter: url(#distant1);
}

.distant-top:after {
filter: url(#distant-top);
}

.distant-front:after {
filter: url(#distant-front);
}

.diff1 {
filter: url(#diff1);
}

.bevel, .bevel:after {
filter: url(#light2);
}
</style>
<h1 class='outlinedA'>OutlinedA</h1>
<h1 class='outlinedA mid'>OutlinedA</h1>
<div>
<a href="http://hovertree.com/h/bjaf/yishuzi.htm">原文</a> <a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/texiao/keleyi/">向上弹出菜单</a>
</div>
<h1 class='outlinedB'>OutlinedB</h1>
<h1 class='hsl'>Hsl Colors</h1>
<h1 class='test'>Test</h1>
<h1 class='bottom'>Bottom Light</h1>
<h1 class='dilate'>Dilate</h1>
<h1 class='erode'>Erode</h1>
<h1 class='distant1'>Distant Light</h1>
<h1 class='distant-top'>Distant Top</h1>
<h1 class='distant-front'>Distant Front</h1>
<h1 class='diff1'>Diffused Light</h1>
<h1 class='bevel'>Bevel</h1>
<h1 style="font-family:cursive;text-shadow:6px 2px 2px #333;color:deeppink">何问起</h1>
<h1 style="font-family:cursive;text-shadow:6px 2px 2px #666666;">hovertree.com</h1>
</body>
</html>

参考：

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/120670.html原文链接：https://javaforall.net

纯css3艺术文字样式效果代码

相关推荐

联想笔记本键盘亮屏幕不亮_笔记本电脑进入睡眠状态后无法通过鼠标或键盘来唤醒屏幕怎么解决…「建议收藏」

360天擎退出密码不知道_奇安信天擎卸载时要输密码

前后端分离架构概述「建议收藏」

js的 cssText[通俗易懂]

国内做得好的hr系统_平安hrx下载

详解 ManualResetEvent

发表回复