CSS3 流式导航菜单栏/悬停文本浮动/点击放大

Fluid Nav menu

菜单,悬停

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2202
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

ul {
    list-style: none;
}
body {
    display: block;
    position: relative;
    height: 100vh;
    width: 100vw;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMSAxIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48cmFkaWFsR3JhZGllbnQgaWQ9Imxlc3NoYXQtZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM0NjQxNGYiIHN0b3Atb3BhY2l0eT0iMSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQxM2M0OSIgc3RvcC1vcGFjaXR5PSIxIi8+PC9yYWRpYWxHcmFkaWVudD48cmVjdCB4PSItNTAiIHk9Ii01MCIgd2lkdGg9IjEwMSIgaGVpZ2h0PSIxMDEiIGZpbGw9InVybCgjbGVzc2hhdC1nZW5lcmF0ZWQpIiAvPjwvc3ZnPg==);
    background-image: -webkit-radial-gradient(top, circle, #46414f 0%, #413c49 100%);
    background-image: -moz-radial-gradient(top, circle, #46414f 0%, #413c49 100%);
    background-image: -o-radial-gradient(top, circle, #46414f 0%, #413c49 100%);
    background-image: radial-gradient(circle at to bottom, #46414f 0%, #413c49 100%);
    font-family: 'Maven Pro', sans-serif;
    padding: 50px;
}
ul {
    width: 20vw;
    min-width: 200px;
    -webkit-perspective: 500px;
    -moz-perspective: 500px;
    perspective: 500px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
li {
    padding: 10px 20px;
    color: #e0e0fe;
    cursor: default;
    background-color: #0f0e11;
    -webkit-transition: background-color 0.3s, padding 0.6s, -webkit-transform 0.4s, margin 0.4s, -webkit-box-shadow 0.4s, font-size 0.4s, blur 0.4s;
    -moz-transition: background-color 0.3s, padding 0.6s, -moz-transform 0.4s, margin 0.4s, -moz-box-shadow 0.4s, font-size 0.4s, blur 0.4s;
    -o-transition: background-color 0.3s, padding 0.6s, -o-transform 0.4s, margin 0.4s, box-shadow 0.4s, font-size 0.4s, blur 0.4s;
    transition: background-color 0.3s, padding 0.6s, -webkit-transform 0.4s, -moz-transform 0.4s, -o-transform 0.4s, transform 0.4s, margin 0.4s, box-shadow 0.4s, font-size 0.4s, blur 0.4s;
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    transition-delay: 0.2s;
    z-index: 90;
}
li:hover {
    background-color: #01acec;
    padding-left: 25px;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
    z-index: 100;
}
li.active {
    padding: 30px 20px;
    background-color: #dc5550;
    -webkit-box-shadow: 0 15px 10px rgba(15, 14, 17, 0.5);
    -moz-box-shadow: 0 15px 10px rgba(15, 14, 17, 0.5);
    box-shadow: 0 15px 10px rgba(15, 14, 17, 0.5);
    font-size: 1.5rem;
    -webkit-transform: translateZ(50px);
    -moz-transform: translateZ(50px);
    -o-transform: translateZ(50px);
    -ms-transform: translateZ(50px);
    transform: translateZ(50px);
    z-index: 10;
}

HTML

Fluid Nav menu

菜单,悬停

编辑器支持Emmet

快捷键

Fluid Nav menu

菜单,悬停

使用SVG和CSS3实现的边栏导航菜单栏

使用jQuery和CSS3实现竖向手风琴菜单导航栏

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：