找回密码
当前位置：前端开发者 > CSS > 正文

纯CSS3 前端开发导航教程

2018-05-30 分类：CSS 阅读(701) 评论(0)

css3 前端开发插件|html5 css3 前端开发|web前端开发

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
<metacharset=”UTF-8″ />
<title>css3 menu开发</title>
<style type=”text/css”>
*{
margin:0;
padding:0;
}
ul,
li{
list-style:none;
}
a{
text-decoration:none;
}
body{
background:#ccc;
}
#box{
margin:30pxauto;
width:630px;
height:120px;
background:#999;
border-radius:20px;
position:relative;
}
ul{
width:600px;
height:100px;
background:#555;
margin:10px15px;
position:relative;
top:10px;
}
ul>li{
width:100px;
height:100px;
border-radius:50px;
float:left;
position:relative;
z-index:5;
}
ul>li>a{
display:block;
border-radius:50px;
}
ul>li>a>img{
display:block;
width:100px;
height:100px;
}
.moveDiv{
width:100px;
height:100px;
background:#ffb61a;
position:absolute;
left:0px;
top:0px;
z-index:0;
-webkit-transition:all.5sease;
-moz-transition:all.5sease;
-ms-transition:all.5sease;
-o-transition:all.5sease;
transition:all.5sease;
}
.moveDiv:before{
content:””;
display:block;
width:100px;
height:10px;
position:relative;
border-top-right-radius:10px;
border-top-left-radius:10px;
top:-20px;
background:#ffb61a;
}
.moveDiv:after{
content:””;
display:block;
width:100px;
height:10px;
position:relative;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
top:-30px;
background:#ffb61a;
}
.upDeg{
width:0;
height:0px;
background:#999;
margin-top:10px;
border-top:10pxsolid#ffb61a;
border-left:5pxsolidtransparent;
border-right:5pxsolidtransparent;
position:relative;
left:45%;
top:-30px;
z-index:15;
}
.downDeg{
width:0;
height:0px;
background:#999;
margin-top:100px;
border-bottom:10pxsolid#ffb61a;
border-left:5pxsolidtransparent;
border-right:5pxsolidtransparent;
position:relative;
left:45%;
top:-30px;
z-index:15;
}
#box>ulli:nth-of-type(1):hover~.moveDiv{
left:0px;
}
#box>ulli:nth-of-type(2):hover~.moveDiv{
left:100px;
}
#box>ulli:nth-of-type(3):hover~.moveDiv{
left:200px;
}
#box>ulli:nth-of-type(4):hover~.moveDiv{
left:300px;
}
#box>ulli:nth-of-type(5):hover~.moveDiv{
left:400px;
}
#box>ulli:nth-of-type(6):hover~.moveDiv{
left:500px;
}
</style>
</head>
<body>
<divid=”box”>
<ul>
<li>
<ahref=”##”>
<imgsrc=”http://cdn.attach.qdfuns.com/notes/pics/201611/22/174824wrfnqrcbhchxc2qz.png”>
</a>
</li>
<li>
<ahref=”##”>
<imgsrc=”http://cdn.attach.qdfuns.com/notes/pics/201611/22/174824egsgdozbhscsunjh.png”>
</a>
</li>
<li>
<ahref=”##”>
<imgsrc=”http://cdn.attach.qdfuns.com/notes/pics/201611/22/174823m26o4hhv6hho8kz1.png”>
</a>
</li>
<li>
<ahref=”##”>
<imgsrc=”http://cdn.attach.qdfuns.com/notes/pics/201611/22/174823ql6uxurwuwgghyqu.png”>
</a>
</li>
<li>
<ahref=”##”>
<imgsrc=”http://cdn.attach.qdfuns.com/notes/pics/201611/22/174823tfg07tsb0vo3usq7.png”>
</a>
</li>
<li>
<ahref=”##”>
<imgsrc=”http://cdn.attach.qdfuns.com/notes/pics/201611/22/174823pdnnggr3o9n2xrnn.png”>
</a>
</li>
<divclass=”moveDiv”>
<divclass=”upDeg”></div>
<divclass=”downDeg”></div>
</div>
</ul>
</div>
</body>
</html>
css前端开发|web前端开发 html css 实战|网站前端开发
赞(0)
前端开发者 » 纯CSS3 前端开发导航教程
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论