<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
li{ width:150px;
list-style:none;
margin-top:10px;
border:#CCC solid 1px;
border-bottom-right-radius:10px;
border-top-right-radius:10px;}
ul[class$="1"]{ float:left;}
ul[class$="2"]{ float:left; margin-left:50px;}
ul[class$="3"]{ float:left;}
ul[class$="1"] li{background:#9C0;}
ul[class$="2"] li{background:#0CF;}
ul[class$="3"] li{width:150px; height:18px;
-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 5;}
.ul1 li:hover{background-color:red;
-webkit-transition-property:background-color;
-moz-transition-property:background-color;
-o-transition-property:background-color;
-webkit-transition-duration:2s;
-moz-transition-duration:2s;
-o-transition-duration:2s;
}
.ul2 li:hover{width:250px;
-webkit-transition-property:width;
-moz-transition-property:width;
-o-transition-property:width;
-webkit-transition-duration:2s;
-moz-transition-duration:2s;
-o-transition-duration:2s;}
</style>
</head>
<body>
<ul class="ul1">
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
<ul class="ul2">
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
<ul class="ul3">
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
</body>
</html>
css实现导航菜单的渐变
感谢您的支持，我会继续努力的!
扫码打赏，你说多少就多少
打开支付宝、微信、QQ扫一扫，即可进行扫码打赏哦
评论1