CSS3仿GooglePlay菜单

来源：互联网发布：java自行车是高端的吗编辑：程序博客网时间：2024/05/29 04:45

CSS3仿GooglePlay菜单

<html>

<head>

<title>CSS3仿GooglePlay菜单</title>

body{background:#E5E5E5;}

ul,li{margin:0;padding:0;}

nav{width:200px;height:300px;background:rgba(245,245,245,0.95);box-shadow:0px 1px 6px #bebebe;margin:30px 0 0 200px;}

nav ul li{list-style:none;height:50px; position:relative;}

nav ul li a{color:#666;text-decoration:none;font-size:14px; position:absolute;left:60px;top:18px;width:140px; display:block;}

nav ul li a:hover{color:#fff;}

nav ul li:hover{width:200px;

/*transition-property:all;

transition-duration:0.4s;

transition-timing-function:ease;

transition-delay:0s;*/

transition:all ease 0.4s 0s;

}

.store{width:50px;height:50px;background:#B3C833;}

.movies{width:50px;height:50px;background:#CE5043;}

.music{width:50px;height:50px;background:#FB8521;}

.books{width:50px;height:50px;background:#1AA1E1;}

.magazines{width:50px;height:50px;background:#5E5CA6;}

.devices{width:50px;height:50px;background:#658092;}

nav ul li span.store_icon{position:absolute;left:10px;top:12px;width:26px;height:26px;background:url(images/icoa1.png) no-repeat;}

nav ul li span.movies_icon{position:absolute;left:10px;top:12px;width:26px;height:26px;background:url(images/icoa2.png) no-repeat;}

nav ul li span.music_icon{position:absolute;left:10px;top:12px;width:26px;height:26px;background:url(images/icoa3.png) no-repeat;}

nav ul li span.books_icon{position:absolute;left:10px;top:12px;width:26px;height:26px;background:url(images/icoa4.png) no-repeat;}

nav ul li span.magazines_icon{position:absolute;left:10px;top:12px;width:26px;height:26px;background:url(images/icoa5.png) no-repeat;}

nav ul li span.devices_icon{position:absolute;left:10px;top:12px;width:26px;height:26px;background:url(images/icoa6.png) no-repeat;}

</style>

</head>

<body>

<nav>

<ul>

</ul>

</nav>

</body>

</html>

0 0