SVG图标+CSS3变换实现的边栏菜单

SVG+CSS3 Sidebar Navigation Animation

svg, icon, menu

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:300);
html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: Roboto;
    height: 100%;
}
.hide {
    display: none;
}
.head-nav li:hover {
    background-color: #1a1a1a;
}
.head-nav li:hover:before {
    background-color: #1a1a1a;
}
.head-nav li:hover svg {
    background: #1a1a1a;
    fill: #ed1c5b;
}
.head-nav li:hover a {
    color: #ed1c5b;
}
.head-nav li:before {
    position: absolute;
    left: -0.925rem;
    top: 0;
    width: 0.925rem;
    height: 100%;
    content: "";
    background: #ed1c5b;
    z-index: 1;
    -webkit-transition: background 400ms;
    transition: background 400ms;
}
.head-nav ul {
    margin-top: 1.85rem;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    padding: 0;
    list-style: none;
}
.head-nav li {
    position: relative;
    clear: both;
    width: 100%;
    padding: 0;
    -webkit-transition: background 400ms;
    transition: background 400ms;
}
.head-nav li a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding-top: 2vh;
    padding-bottom: 2vh;
}
.head-nav a {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    color: #fefefe;
    text-decoration: none;
    -webkit-transition: color 400ms;
    transition: color 400ms;
}
.head-nav a span {
    position: relative;
    display: block;
    z-index: 0;
    font-family: Roboto;
    text-indent: -20em;
    white-space: nowrap;
    -webkit-transition: text-indent 400ms ease-in-out;
    transition: text-indent 400ms ease-in-out;
}
.head-nav svg {
    position: relative;
    max-width: 80px;
    max-height: 30px;
    z-index: 1;
    fill: #fefefe;
    background: #ed1c5b;
    -webkit-transition: 400ms;
    transition: 400ms;
}
@media screen and (max: 768px) {
    .head-nav ul {
        margin-top: 0.23125rem;
    }
    .head-nav svg {
        max-width: 20px;
    }
}
.main-head {
    position: fixed;
    bottom: 0;
    width: 83px;
    height: 100%;
    z-index: 1;
    background: #ed1c5b;
    -webkit-transition: width 400ms;
    transition: width 400ms;
}
.main-head:hover {
    width: 436px;
}
.main-head:hover + .wrap-all-the-things {
    -webkit-transform: translateX(336px);
    -ms-transform: translateX(336px);
    transform: translateX(336px);
    max-width: 100%;
    opacity: 0.4;
}
.main-head:hover .head-nav li:nth-of-type(1) span {
    -webkit-transition-delay: 100ms;
    transition-delay: 100ms;
}
.main-head:hover .head-nav li:nth-of-type(2) span {
    -webkit-transition-delay: 200ms;
    transition-delay: 200ms;
}
.main-head:hover .head-nav li:nth-of-type(3) span {
    -webkit-transition-delay: 300ms;
    transition-delay: 300ms;
}
.main-head:hover .head-nav li:nth-of-type(4) span {
    -webkit-transition-delay: 400ms;
    transition-delay: 400ms;
}
.main-head:hover .head-nav span {
    text-indent: 0;
}
@media screen and (max: 768px) {
    .main-head {
        width: 70px;
        padding: 0 0.925rem;
    }
    .main-head .head-nav {
        padding-left: 7px;
    }
    .main-head:hover .head-nav span {
        text-indent: 1em;
    }
}
.wrap-all-the-things {
    min-height: 100%;
    height: 100%;
    padding-left: 140px;
    margin-top: 0;
    background-image: url(/uploads/160301/s4.jpg);
    background-size: cover;
    background-position: center center;
    -webkit-transition: -webkit-transform 400ms, opacity 400ms;
    transition: transform 400ms, opacity 400ms;
}
@media screen and (max: 480px) {
    .wrap-all-the-things {
        padding-left: 70px;
    }
}

HTML

<header class="main-head">
    <nav class="head-nav">
        <ul class="menu">
            <li>
                <a href="#">
                    <svg class="person">
                        <use xmlns:xlink="https://www.w3.org/1999/xlink" xlink:href="#person"></use>
                    </svg><span>About</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <svg class="video-player">
                        <use xmlns:xlink="https://www.w3.org/1999/xlink" xlink:href="#video-player"></use>
                    </svg><span>Work</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <svg class="speech-bubble">
                        <use xmlns:xlink="https://www.w3.org/1999/xlink" xlink:href="#speech-bubble"></use>
                    </svg><span>Blog</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <svg class="paper-airplane">
                        <use xmlns:xlink="https://www.w3.org/1999/xlink" xlink:href="#paper-airplane"></use>
                    </svg><span>Contact</span>
                </a>
            </li>
        </ul>
    </nav>
</header>

SVG+CSS3 Sidebar Navigation Animation

svg, icon, menu

编辑器支持Emmet

快捷键

SVG+CSS3 Sidebar Navigation Animation

svg, icon, menu

使用SVG+CSS3实现带旋转星辰背景的动画图标

使用SVG实现的弹性元素 - 菜单栏的弹簧边线

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：