实现CSS3带有倒影的文字效果
分类：实例代码
CSS3带有倒影的文字效果属于前端实例代码，有关更多实例代码大家可以查看。
关于倒影效果一般只有在ps中才可以看到，css3的出现为实现这种效果带来了便利。
下面就是一段这样的代码实例，需要的朋友可以做一下参考。
代码实例如下:
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
.content h3{
position:relative;
float:left;
opacity:0.7;
font:40px/50px 'Microsoft yahei';
}
.content h3:before{
content:attr(title);
position:absolute;
z-index:1;
top:100%;
left:0;
height:100%;
width:100%;
-webkit-transform:scaleY(-1);
}
.content h3:after{
content:'';
position:absolute;
z-index:2;
top:100%;
left:0;
height:100%;
width:100%;
background:-webkit-gradient(linear, center top, center bottom, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));
}
.content .next{
clear:both;
padding:60px;
}
</style>
</head>
<body>
<div class="content">
<h3 title="前端教程网">前端教程网</h3>
<div class="next"></div>
</div>
</body>
</html>
CSS3带有倒影的文字效果，这样的场景在实际项目中还是用的比较多的，关于CSS3带有倒影的文字效果就介绍到这了。