DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS特效代碼 >> 通過CSS3,實現元素覆蓋效果
通過CSS3,實現元素覆蓋效果
編輯:CSS特效代碼     

在非常多站點中,我們都能夠看到這種效果。當用戶鼠標進入某一個元素後,下方就會有遮罩層上浮動畫,如圖:


今天我們就用hover偽類加上css3實現,沒有使用不論什麼JS

<!DOCTYPE html>
<html>
<head lang="zh-cmn-Hans">
  <meta charset="UTF-8">
  <title></title>
  <style>
    #d1{
      height: 100px;
      position: relative;
      width: 100px;
      overflow: hidden;
    }

    #d1:hover > #d3{
      transform: translateY(-100%);
    }

    #d2{
      background: red;
      height: 100px;
      width: 100px;
    }

    #d3{
      color: white;
      background: #111;
      height: 100px;
      opacity: 0.6;
      transition: transform 0.5s ease;
      width: 100px;
    }
  </style>
</head>
<body>
  <div id="d1">
    <div id="d2"></div>
    <div id="d3"></div>
  </div>
</body>
</html>


XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved