国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端實例練習 - 圖片覆蓋層

meteor199 / 1139人閱讀

摘要：圖片覆蓋層代碼儲存在效果預覽初衷很多人在初學前端的時候都會問，如何入門前端同為在前端學習道路上，奮力追趕的一員，本人對于目前網絡上所能看到的入門級的教材并不太滿意。在這里本人整理了目前頁面上常見功能實現的具體實例。

圖片覆蓋層

代碼儲存在Github
效果預覽

初衷：很多人在初學前端的時候都會問，“如何入門前端？”
同為在前端學習道路上，奮力追趕的一員，本人對于目前網絡上所能看到的 “入門級” 的教材并不太滿意。學習一門新知識，實例是尤其重要的。在這里本人整理了目前頁面上常見功能實現的具體實例。愿能為大家提供一些幫助。
希望能夠與大家互相分享，共同進步。

效果預覽

HTML 部分 
    
圖片覆蓋層


    

    

      Avatar
      

        
Hello World
CSS 部分 
#mySelect {
  font-size: 16px;
  text-align: center;
}

.container {
  position: relative;
  width: 30%;
}

.image {
  display: block;
  width: 100%;
}

.overlayFadeIn {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlayFadeIn {
  opacity: 1;
}

.overlaySlideInTop {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}

.container:hover .overlaySlideInTop {
  bottom: 0;
  height: 100%;
}

.overlaySlideInBottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.container:hover .overlaySlideInBottom {
  height: 100%;
}

.overlaySlideInRight {
  position: absolute;
  bottom: 0;
  left: 100%;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.container:hover .overlaySlideInRight {
  width: 100%;
  left: 0;
}

.overlaySlideInLeft {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.container:hover .overlaySlideInLeft {
  width: 100%;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  white-space: nowrap;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
JavaScript 部分

這部分代碼只為展示方便而用，不需考慮。

(function() {
    var mySelect = document.getElementById("mySelect");
        overlay = document.getElementById("overlay");

    mySelect.onchange = function(e) {
        overlay.className = e.target.value;
    }
})();

好啦，現在所有的代碼都寫完啦！

趕快打開瀏覽器，看看效果吧！

在這里，只是給大家提供一種思路，參考。
具體的實現，每個人都可以有不同的方法。
請大家趕快發揮想象，把你最想實現的功能，在電腦敲出來吧！

參考自w3cschools

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81995.html

相關文章

  • 前端實例練習 - 圖片覆蓋層

    摘要：圖片覆蓋層代碼儲存在效果預覽初衷很多人在初學前端的時候都會問，如何入門前端同為在前端學習道路上，奮力追趕的一員，本人對于目前網絡上所能看到的入門級的教材并不太滿意。在這里本人整理了目前頁面上常見功能實現的具體實例。 圖片覆蓋層 代碼儲存在Github效果預覽 初衷：很多人在初學前端的時候都會問，如何入門前端？同為在前端學習道路上，奮力追趕的一員，本人對于目前網絡上所能看到的 入門級 的...

    Freeman 評論0 收藏0

  • 前端實例練習 - 圖片覆蓋層

    摘要：圖片覆蓋層代碼儲存在效果預覽初衷很多人在初學前端的時候都會問，如何入門前端同為在前端學習道路上，奮力追趕的一員，本人對于目前網絡上所能看到的入門級的教材并不太滿意。在這里本人整理了目前頁面上常見功能實現的具體實例。 圖片覆蓋層 代碼儲存在Github效果預覽 初衷：很多人在初學前端的時候都會問，如何入門前端？同為在前端學習道路上，奮力追趕的一員，本人對于目前網絡上所能看到的 入門級 的...

    feng409 評論0 收藏0

  • 【CSS練習】IT修真院--練習5-護工個人界面

    摘要：任務五一個最常見的移動端頁面完成的事情學習張鑫旭世界相關章節張鑫旭系列了解通配符選擇器性能優化瀏覽器渲染原理學習各屬性及效果完成任務五學習編碼規范編碼規范并按照編碼規范優化代碼完成深度思考計劃的事情找時間把前面任務的官方提供鏈接過一遍，查缺 任務五、 一個最常見的移動端頁面 完成的事情 float學習 張鑫旭《CSS世界》相關章節 張鑫旭 float系列 了解CSS通配符 &...

    Jonathan Shieber 評論0 收藏0

  • 【CSS練習】IT修真院--練習3-簡單界面

    摘要：任務三一個最簡單的移動端頁面今天完成的事情運用布局知識跟隨設計圖進行布局，完成簡單并繼續學習優化讓布局更好適應屏幕變化使用了盒模型及百分比了解區別在中應用圖片處理學習明天計劃的事情深度思考手機分辨率和網頁的區別周末補學任務四計劃及簡單編寫遇 任務三、 一個最簡單的移動端頁面 今天完成的事情 運用布局知識跟隨設計圖進行布局，完成簡單Demo并繼續學習優化. 讓布局更好適應屏幕變化(使用...

    MrZONT 評論0 收藏0

  • 前端實例練習 - 模態圖

    摘要：模態圖代碼儲存在效果預覽初衷很多人在初學前端的時候都會問，如何入門前端同為在前端學習道路上，奮力追趕的一員，本人對于目前網絡上所能看到的入門級的教材并不太滿意。在這里本人整理了目前頁面上常見功能實現的具體實例。 模態圖 代碼儲存在Github效果預覽 初衷：很多人在初學前端的時候都會問，如何入門前端？同為在前端學習道路上，奮力追趕的一員，本人對于目前網絡上所能看到的 入門級 的教材并不...

    Turbo 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<