CSS3实现文字凹凸效果体验

标签: CSS3 文字阴影 凹凸效果
9人阅读 评论(0) 收藏 举报

1. 原理:使用css3的text-shadow属性,先将背景颜色与字体颜色调成一样,在给文字设置两个相反方向的阴影.

2. 代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body {
				background: gray;
			}
			
			h1 {
				font-size: 200px;
				color: gray;
				text-shadow: 3px 3px 2px black,
								-3px -3px 2px white;
			}
			
			h1:hover {
				text-shadow: 3px 3px 2px white,
								-3px -3px 2px black;
			}
		</style>
	</head>
	<body>
		<div id="app">
			
		</div>
		<h1>
			你好
		</h1>
	</body>
</html>

至此。

查看评论

css3-文本阴影效果、凹凸效果

p{ font-size: 150px; font-family: "Microsoft Yahei"; text-align:...
  • gyq04551
  • gyq04551
  • 2016-11-21 20:35:28
  • 1575

css凹凸文字简单设置

凹凸文字
  • luobo2345
  • luobo2345
  • 2017-11-10 18:23:25
  • 288

CSS3中文本的描边(普通描边、凸起、凹陷)和发光效果

利用text-shadow属性的特性,同时在上,下,左,右中个方向为文字设置多个阴影,且不设置模糊作用距离(即默认没有模糊效果),就可以实现文本的描边效果了。 文本的描边效果 p{ pad...
  • Cryhelyxx
  • Cryhelyxx
  • 2013-10-30 14:06:35
  • 10263

纯CSS3属性animation实现的打字效果

*{margin:0;padding:0;} @keyframes typing { from { width: 0; } } @keyframes blink-caret { 50%...
  • u013018357
  • u013018357
  • 2016-02-29 15:12:27
  • 3881

CSS3实现文字流光渐变特效

先上个效果图 下面先上代码 HTML部分 Title 日暮苍山远,天寒白屋贫。柴门闻犬吠,风雪夜归人。 CSS部分 .mas...
  • qq_36370731
  • qq_36370731
  • 2017-11-06 10:26:34
  • 799

基于WPF技术,凹凸图画使变成浮雕效果

  • 2011年02月10日 17:39
  • 443KB
  • 下载

CSS3立体文字最佳实践

昨天的《纯CSS3文字效果推荐》文章里面推荐了8款纯css实现的文字效果,其中3d文字效果最为流行,限于篇幅仅仅展示了其3D实现原理,没有考虑代码的复用性和可移植性,立体字的纵深感、方向感、错落感如何...
  • whqet
  • whqet
  • 2014-05-06 13:40:46
  • 11940

CSS3文字立体效果

很棒的CSS3文字立体效果,用鼠标选中文字,效果更清淅,CSS3的功能真的很强大,总能制作出一些令人吃惊的效果,支持css3,大家看效果的时候请使用其它的浏览器啊,比如火狐或Opera等,IE8没效果...
  • life66881
  • life66881
  • 2015-07-12 12:58:11
  • 2249

CSS3实现文字渐隐效果

div{ -webkit-animation: twinkling 1s infinite ease-in-out } .animated{ -webkit-animation-du...
  • dududu01
  • dududu01
  • 2015-07-21 20:35:05
  • 7722

css3之animation制作闪烁文字效果

.box{ animation: change 1s ease-in infinite ; font-size: 36px; color:#f00; font-weight: bold} ...
  • alex8046
  • alex8046
  • 2016-10-08 10:53:48
  • 4007
    个人资料
    持之以恒
    等级:
    访问量: 639
    积分: 200
    排名: 34万+
    文章分类
    文章存档