html炫酷导航实例,HTML+CSS3简易实现炫酷导航栏（颜色可改）

最新推荐文章于 2024-02-23 17:48:39 发布

老K先生

最新推荐文章于 2024-02-23 17:48:39 发布

阅读量1.2k

点赞数

文章标签： html炫酷导航实例

这篇博客详细介绍了如何使用CSS创建具有渐变背景、悬停效果和延迟过渡动画的动态导航栏。通过设置不同的CSS属性，如`linear-gradient`、`transform`、`transition`和`hover`状态，实现了导航菜单项在鼠标悬停时展开子菜单的平滑过渡效果，增强了用户体验。

摘要由CSDN通过智能技术生成

HTML页面为css

css导航栏

CSS样式为html

padding: 0;

margin: 0;

list-style: none;

}

body{

background-color: #cccccc;

}

.container{

margin: 30px auto;

width: 70%;

}

.container .menu>li{

float: left;

position: relative;

}

.container .menu>li:first-child{

border-radius: 5px 0 0 0;

}

.container .menu li{

min-width: 140px;

background:linear-gradient(#3d3838,#999999);

}

.container .menu a{

display: block;

text-decoration: none;

text-align: center;

color: black;

padding: 0 25px;

font-size: 18px;

line-height: 36px;

border-left: 3px solid rgb(0, 0, 0,0);

text-transform: uppercase;

}

.menu li:hover{

background:linear-gradient(#111111,#424242);

}

.menu li:hover>a{

color: white;

border-left: 3px solid white;

}

.submenu{

position: absolute;

max-height: 0;

left: 0;

top: 100%;

perspective: 1000px;

}

.submenu li{

transform-origin: 0 0;

visibility: hidden;

transform: rotate3d(0,1,0,90deg);

transition: all 0.5s;

}

.menu>li:hover .submenu{

max-height: 999px;

z-index: 10;

}

.menu>li:hover .submenu li{

visibility: visible;

transform: rotate3d(0,0,0,0);

}

.submenu li:nth-child(1){

transition-delay: 0ms;

}

.submenu li:nth-child(2){

transition-delay: 50ms;

}

.submenu li:nth-child(3){

transition-delay: 100ms;

}

.submenu li:nth-child(4){

transition-delay: 150ms;

}

.submenu li:nth-child(5){

transition-delay: 200ms;

}

.submenu li:nth-child(6){

transition-delay: 250ms;

}

CSS样式为web