css實現對聯程式碼例項

螞蟻小編發表於2017-04-16
CSS

分享一段簡單的程式碼例項，它用css實現了對聯效果。

如果需求js實現的兩端漂浮的對聯效果，可以查閱特效下載版塊廣告程式碼分類。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.wrap{
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
.wrap:after{
  content: '';
  display: block;
  clear: both;
}
.flag{
  position: relative;
  background-color: red;
  width: 100px;
  overflow: hidden;
}
.top,.bottom{
  display: inline-block;
  width: 100px;
  height: 18px;
  background-color: yellow;
}
.bottom{
  position: absolute;
  bottom: 0;
}
p{
  text-align: center;
  font-size: 64px;
}
#flag{
  float: left;
}
#flag2{
  float: right;
}
</style>
</head>
<body>
  <div class="wrap">
    <div class="flag" id="flag">
      <span class="top"></span>
      <p>猴年吉祥</p>
      <span class="bottom"></span>
    </div>
    <div class="flag" id="flag2">
      <span class="top"></span>
      <p>雞年納福</p>
      <span class="bottom"></span>
    </div>
  </div>
</body>
</html>

相關文章