css3實現的漸變線交錯程式碼例項

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

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset="gb2312"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
.back{
  width:687px;
  height:487px;
  background:-webkit-linear-gradient(top, #ff4e42, #fd2d66);
  background:-moz-linear-gradient(top, #ff4e42, #fd2d66);
  background:-o-linear-gradient(top, #ff4e42, #fd2d66);
  position:relative;
}
.back:after{
  content:"";
  display:block;
  width:647px;
  height:3px;
  position:absolute;
  top:50%;
  margin-top:-1px;
  background:-webkit-linear-gradient(left,rgba(255,255,255,0),rgba(255,255,255,0.2),rgba(255,255,255,0));
  background:-moz-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.2), rgba(255,255,255,0));
  background:-o-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,0.2), rgba(255,255,255,0));
}
.line{
  content:"";
  display:block;
  height:447px;
  width:3px;
  position:absolute;
  background:-webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.2), rgba(255,255,255,0));
  background:-moz-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.2), rgba(255,255,255,0));
  background:-o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,0.2), rgba(255,255,255,0));
}
.line:nth-child(1){
  left:30%;
}
.line:nth-child(2){
  right:30%;
}
</style>
</head>
<body>
<div class="back">
  <div class="line"></div>
  <div class="line"></div>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，更多內容可以參閱相關閱讀。

相關閱讀:

（1）.inear-gradient可以參閱css3 linear-gradient線性漸變一章節。

（2）.:after可以參閱CSS E:after/E::after一章節。

（3）.nth-child可以參閱CSS E:nth-child(n)一章節。

相關文章