css3實現的氣泡效果程式碼例項

admin發表於2017-02-19
CSSS3
本章節分享一段程式碼例項，它實現了氣泡效果。

由於css3的強大功能，很多美觀的效果可以不用使用圖片。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style>
p.thought{   
  position:relative;   
  width:130px;   
  height:100px;   
  text-align:center;   
  line-height:100px;   
  background-color:#fff;   
  border:8px solid #666;   
  -webkit-border-radius:58px;   
  -moz-border-radius:58px;   
  border-radius:58px;   
  -webkit-box-shadow:2px 2px 4px #888;   
  -moz-box-shadow:2px 2px 4px #888;   
  box-shadow:2px 2px 4px #888;   
}
p.thought:before, p.thought:after{   
  content:'';   
  position:absolute;   
  left:10px;   
  top:70px;   
  width:40px;   
  height:40px;   
  background-color:#fff;   
  border:8px solid #666;   
  -webkit-border-radius:28px;   
  -moz-border-radius:28px;   
  border-radius:28px;   
  z-index:5;   
}
p.thought:after{   
  position:absolute;   
  width:20px;   
  height:20px;   
  left:5px;   
  top:100px;   
  -webkit-border-radius:18px;   
  -moz-border-radius:18px;   
  border-radius:18px;   
  z-index:6;   
}            
</style>
</head>
<body>
<p class="thought">螞蟻部落</p> 
</body>
</html>

相關文章