实现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带有倒影的文字效果就介绍到这了。

回复

我来回复
  • 暂无回复内容