我想你已经看过了各种带有效果的动画菜单(基于 插件)css导航css导航css导航 css过度菜单,漂亮的纯CSS3水平导航菜单（有过渡动画效果），本文介绍如何仅使用 CSS3(没有任何 )重复相同的行为，在菜单中使用 CSS3 过渡(为元素设置动画)。
漂亮的纯CSS3水平导航菜单(有过渡效果)
步骤 1. HTML
这是菜单的html代码。 这是基于 UL-LI 的导航菜单。
Menu2 Menu3
第 2 步。 CSS
这是菜单的 CSS 样式。#nav,#navul{
list-style:;
:0;
:0;
}
#nav{
:url('.png')no-arent;
clear:both;
font-size:12px;
:58px;
:;
:;
width:957px;
}
#navul{
-color:#222;
:#222;
-:;
-width:;
box-:(0,0,0,0.5);
left:-;
:;
:;
top:-;
z-index:2;
-moz-:(0);
-ms-:(0);
-o-:(0);
--:(0);
:(0);
-moz--:00;
-ms--:00;
-o--:00;
---:00;
-:00;
-moz-:-moz-.;
-ms-:-ms-.;
-o-:-o-.;
--:--.;
:.;
}
#navli{
:url('.png')no-;
float:left;
:;
}
#{
color:#;
:block;
float:left;
font-:;
:30px;
:;
:;
text-:none;
text-:#;
}
#navli:hover>a{
color:#;
}
#navli:hover,#nava:focus,#nava:hover,#nava:{
:#;
:0none;
}
#navli:.subs{
left:0;
top:53px;
width:180px;
-moz-:(1);
-ms-:(1);
-o-:(1);
--:(1);
:(1);
}
#{
:none;
width:100%;
}
#{
float:none;
}
#:hover>a{
-color:#;
color:#;
}
#{
:url('.png')no-arent;
:16px;
left:13px;
:;
top:0px;
width:64px;
-moz-:;
-ms-:;
-o-:;
--:;
:;
}
#:hover{
-moz--:3000s;
-ms--:3000s;
-o--:3000s;
---:3000s;
-:3000s;
}
#navli:nth-of-type(1):hover~#{
left:13px;
}
#navli:nth-of-type(2):hover~#{
left:90px;
}
#navli:nth-of-type(3):hover~#{
left:170px;
}
#navli:nth-of-type(4):hover~#{
left:250px;
}
#navli:nth-of-type(5):hover~#{
left:330px;
}
#navli:nth-of-type(6):hover~#{
left:410px;
}
#navli:nth-of-type(7):hover~#{
left:490px;
}
#navli:nth-of-type(8):hover~#{
left:565px;
}
结论
希望你喜欢这个新的 CSS3 菜单。
关于CSS3菜单，你可可以看看下面这些文章：
文章来源:https://blog.csdn.net/weixin_27037521/article/details/119374337