CSS3 分類菜單效果
發(fā)布時間：2019-05-27 14:50:37 作者：佚名 
我要評論
我要評論這篇文章主要介紹了CSS3 分類菜單效果,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
CSS3 分類菜單效果如下所述：
HTML
<html>
<head>
<title></title>
<style type="text/css">
#bg { width: 1270px; height: 751px; margin: 0 auto; background: url("images/bg.jpg") no-repeat; }
.sblock { width: 800px; height: 250px; margin: 0 auto;}
/*.sblock { transform:translateY(65%); }*/
.sblock > div { width: 200px; height: 250px; margin: 0 auto; }
.sb1 { padding-top: 170px; }
.sb2 { padding-top: 30px; }
.sblock div:hover { transform: translateY(-10px); }
.sblock div { transition:all 0.5s; }
.sb1 > div:nth-of-type(1) { float: left; background: url("images/1.jpg") no-repeat; }
.sb1 > div:nth-of-type(2) { float: left; background: url("images/2.jpg") no-repeat; }
.sb1 > div:nth-of-type(3) { float: left; background: url("images/3.jpg") no-repeat; }
.sb1 > div:nth-of-type(4) { float: left; background: url("images/4.jpg") no-repeat; }
.sb2 > div:nth-of-type(1) { float: left; background: url("images/5.jpg") no-repeat; }
.sb2 > div:nth-of-type(2) { float: left; background: url("images/6.jpg") no-repeat; }
.sb2 > div:nth-of-type(3) { float: left; background: url("images/7.jpg") no-repeat; }
.sb2 > div:nth-of-type(4) { float: left; background: url("images/8.jpg") no-repeat; }
</style>
</head>
<body>
<div id="bg">
<section class="sblock sb1">
<div></div>
<div></div>
<div></div>
<div></div>
</section>
<section class="sblock sb2">
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</div>
</body>
</html>
總結(jié)
以上所述是小編給大家介紹的CSS3 分類菜單效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
jQuery+CSS3實現(xiàn)適應手機端的Tab菜單頁面切換插件
今天給大家分享一款設(shè)計和精致的jQuery Tab頁面切換插件，它的樣式風格與傳統(tǒng)的Tab切換不同，首先Tab標簽使用的是小圖標模式，就像一個按鈕一樣。有需要的朋友可以直接下載2018-12-06
js和CSS3炫酷圓形導航菜單插件circular-menu
circular-menu是一款基于js和CSS3的炫酷圓形導航菜單插件，使用js來驅(qū)動，通過CSS3制作炫酷的圓形導航菜單特效2018-12-04
這篇文章主要介紹了CSS3 二級導航的制作的示例的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-02
