CSS3帶有倒影的文字效果

admin發表於2018-07-17
CSSS3
關於倒影效果一般只有在ps中才可以看到，css3的出現為實現這種效果帶來了便利。

下面就是一段這樣的程式碼例項，需要的朋友可以做一下參考。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

相關文章