映像多維展示效果

在Awwwards上欣賞牛人大作時，看到了一個網站newtonrunning，狠喜歡他的菜單轉場效果和球鞋多維展示效果，然後禁不住手癢仿製了一個多維映像展示效果，大家可以欣賞效果，線上研究，下載收藏。

本案例主要知識點

1.css counter計數器的使用

2.自適應設計（百分比實現）

3.CSS3 Transition（過渡）

4.複雜選取器的用法

好的，開工吧，首先看html，我們用ul>li來作導航的功能表項目，裡面什麼都不要，顯示映像的那個元素，我們放到和li並列的層次，以便於以後使用兄弟選擇符選中。

<ul class="menu"><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><li><a href="#"></a></li><!--映像顯示元素，和li放到一塊，以便使用兄弟選擇符選中--><div class="pic"></div></ul>

我們使用了normalize.css來調和瀏覽器的分歧。

<link rel="stylesheet" type="text/css" href="css/normalize.css"/>

然後我們來進行全域設定，設定頁面背景、溢出，清單項目和盒子大小模型

/* * 全域設定 * 頁面背景、內容溢出設定 * 清單項目、盒子大小設定 * */body{background: #FCCC46;overflow: hidden;}li,li::before,li::after{list-style-type: none;-moz-box-sizing: border-box;box-sizing: border-box;}

菜單的設定，我們在這裡進行計數器的重設

/* * 菜單整體設定 * 寬、高、透明度 * 水平垂直置中設定，大家可以參考本部落格CSS置中對齊一文 * 過渡屬性設定 * 計數器重設 * */.menu{width: 100%;height: 30%;margin: auto;padding: 0;position: absolute;top: 0;right: 0;bottom: 0;left: 0;opacity: 0;-webkit-transition: all 1s;-moz-transition: all 1s;-ms-transition: all 1s;-o-transition: all 1s;transition: all 1s;counter-reset: liCounter;}/* * 菜單Hover設定 * 透明度變化 * */.menu:hover{opacity: 1;}

功能表項目的設定，我們需要設定功能表項目的寬高、背景色、邊框、滑鼠樣式、過渡屬性，我們需要指定計數器增加

/* * 菜單清單項目設定 * 寬、高設定，這裡使用百分比實現自適應 * 背景色、邊框、滑鼠樣式設定 * 過渡屬性設定 * 計數器增加 * */.menu li{float: left;width: 16.666%;height: 100%;border: 1px dashed rgba(255,255,255,.5);border-width:0 1px 0 0;background-color:rgba(255,255,255,0.05);cursor: pointer;position: relative;counter-increment:liCounter;z-index: 2;-webkit-transition: all 1s;-moz-transition: all 1s;-ms-transition: all 1s;-o-transition: all 1s;transition: all 1s;}/* * 菜單清單項目Hover設定 * 背景色改變 * */.menu li:hover{background-color:rgba(255,255,255,0.1);}

提示文本的設定，使用偽對象實現，需要設定寬、高、背景色、邊框、透明度、位置設定、過渡屬性等，使用計數器呈現提示文本

/* * 提示文本(偽對象實現)設定 * 內容設定，使用計數器 * 寬、高、背景色、邊框、透明度 * 位置設定 * 過渡屬性設定 * 文字樣式設定 * */.menu li::before{content:counter(liCounter)'/6';width: 100%;height: 30px;border: 1px solid rgba(0,0,0,.5);border-width: 0 1px;position: absolute;left:0;top: 0;text-align: center;opacity: 0;-webkit-transition: all 1s;-moz-transition: all 1s;-ms-transition: all 1s;-o-transition: all 1s;transition: all 1s;}/* * 提示文本hover設定 * 改變位置、透明度 * */.menu li:hover::before{top:40%;opacity: 1;}

圖片展示元素的設定

/* * 圖片設定 * 寬、高設定 * 位置設定 * 背景設定 * */.menu .pic{width:100%;height:600px;background-position:center center;background-repeat: no-repeat;background-size: 100% auto;position: absolute;left:0;top: 50%;margin-top:-300px;z-index: 1;}/* * hover之後映像設定 * 每個功能表項目的hover之後的映像顯示效果 * */.menu li:nth-child(1):hover~ .pic{background-image: url('img/1.jpg');}.menu li:nth-child(2):hover~ .pic{background-image: url('img/2.jpg');}.menu li:nth-child(3):hover~ .pic{background-image: url('img/3.jpg');}.menu li:nth-child(4):hover~ .pic{background-image: url('img/4.jpg');}.menu li:nth-child(5):hover~ .pic{background-image: url('img/5.jpg');}.menu li:nth-child(6):hover~ .pic{background-image: url('img/6.jpg');}

OK，That's all, Thank you.

---------------------------------------------------------------

前端開發whqet，關注web前端開發技術，分享網頁相關資源。
---------------------------------------------------------------