很实用的一组画布外菜单导航栏入场渐变动效

Transitions for Off-Canvas Navigations 包含一些常用的边栏入场动画：滑入、缩放、推入、3D旋转、开门、下落等。

模板，菜单

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

第三方库
作品简介 1606
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html>
<html lang="en" class="no-js">

<body>
    <div id="st-container" class="st-container">
        
        <nav class="st-menu st-effect-1" id="menu-1">
            <h2 class="icon icon-lab">Sidebar</h2>
            <ul>
                <li><a class="icon icon-data" href="#">Data Management</a>
                </li>
                <li><a class="icon icon-location" href="#">Location</a>
                </li>
                <li><a class="icon icon-study" href="#">Study</a>
                </li>
                <li><a class="icon icon-photo" href="#">Collections</a>
                </li>
                <li><a class="icon icon-wallet" href="#">Credits</a>
                </li>
            </ul>
        </nav>

<nav class="st-menu st-effect-2" id="menu-2">
            <h2 class="icon icon-stack">Sidebar</h2>
            <ul>
                <li><a class="icon icon-data" href="#">Data Management</a>
                </li>
                <li><a class="icon icon-location" href="#">Location</a>
                </li>
                <li><a class="icon icon-study" href="#">Study</a>
                </li>
                <li><a class="icon icon-photo" href="#">Collections</a>
                </li>
                <li><a class="icon icon-wallet" href="#">Credits</a>
                </li>
            </ul>
        </nav>

<nav class="st-menu st-effect-4" id="menu-4">
            <h2 class="icon icon-lab">Sidebar</h2>
            <ul>
                <li><a class="icon icon-data" href="#">Data Management</a>
                </li>
                <li><a class="icon icon-location" href="#">Location</a>
                </li>
                <li><a class="icon icon-study" href="#">Study</a>
                </li>
                <li><a class="icon icon-photo" href="#">Collections</a>
                </li>
                <li><a class="icon icon-wallet" href="#">Credits</a>
                </li>
            </ul>
        </nav>

<nav class="st-menu st-effect-5" id="menu-5">
            <h2 class="icon icon-stack">Sidebar</h2>
            <ul>
                <li><a class="icon icon-data" href="#">Data Management</a>
                </li>
                <li><a class="icon icon-location" href="#">Location</a>
                </li>
                <li><a class="icon icon-study" href="#">Study</a>
                </li>
                <li><a class="icon icon-photo" href="#">Collections</a>
                </li>
                <li><a class="icon icon-wallet" href="#">Credits</a>
                </li>
            </ul>
        </nav>

<nav class="st-menu st-effect-9" id="menu-9">
            <h2 class="icon icon-lab">Sidebar</h2>
            <ul>
                <li><a class="icon icon-data" href="#">Data Management</a>
                </li>
                <li><a class="icon icon-location" href="#">Location</a>
                </li>
                <li><a class="icon icon-study" href="#">Study</a>
                </li>
                <li><a class="icon icon-photo" href="#">Collections</a>
                </li>
                <li><a class="icon icon-wallet" href="#">Credits</a>
                </li>
            </ul>
        </nav>

<nav class="st-menu st-effect-10" id="menu-10">
            <h2 class="icon icon-stack">Sidebar</h2>
            <ul>
                <li><a class="icon icon-data" href="#">Data Management</a>
                </li>
                <li><a class="icon icon-location" href="#">Location</a>
                </li>
                <li><a class="icon icon-study" href="#">Study</a>
                </li>
                <li><a class="icon icon-photo" href="#">Collections</a>
                </li>
                <li><a class="icon icon-wallet" href="#">Credits</a>
                </li>
            </ul>
        </nav>

<nav class="st-menu st-effect-11" id="menu-11">
            <h2 class="icon icon-lab">Sidebar</h2>
            <ul>
                <li><a class="icon icon-data" href="#">Data Management</a>
                </li>
                <li><a class="icon icon-location" href="#">Location</a>
                </li>
                <li><a class="icon icon-study" href="#">Study</a>
                </li>
                <li><a class="icon icon-photo" href="#">Collections</a>
                </li>
                <li><a class="icon icon-wallet" href="#">Credits</a>
                </li>
            </ul>
        </nav>

<nav class="st-menu st-effect-12" id="menu-12">
            <h2 class="icon icon-stack">Sidebar</h2>
            <ul>
                <li><a class="icon icon-data" href="#">Data Management</a>
                </li>
                <li><a class="icon icon-location" href="#">Location</a>
                </li>
                <li><a class="icon icon-study" href="#">Study</a>
                </li>
                <li><a class="icon icon-photo" href="#">Collections</a>
                </li>
                <li><a class="icon icon-wallet" href="#">Credits</a>
                </li>
            </ul>
        </nav>

<nav class="st-menu st-effect-13" id="menu-13">
            <h2 class="icon icon-stack">Sidebar</h2>
            <ul>
                <li><a class="icon icon-data" href="#">Data Management</a>
                </li>
                <li><a class="icon icon-location" href="#">Location</a>
                </li>
                <li><a class="icon icon-study" href="#">Study</a>
                </li>
                <li><a class="icon icon-photo" href="#">Collections</a>
                </li>
                <li><a class="icon icon-wallet" href="#">Credits</a>
                </li>
            </ul>
        </nav>

<div class="st-pusher">
            
            <nav class="st-menu st-effect-3" id="menu-3">
                <h2 class="icon icon-lab">Sidebar</h2>
                <ul>
                    <li><a class="icon icon-data" href="#">Data Management</a>
                    </li>
                    <li><a class="icon icon-location" href="#">Location</a>
                    </li>
                    <li><a class="icon icon-study" href="#">Study</a>
                    </li>
                    <li><a class="icon icon-photo" href="#">Collections</a>
                    </li>
                    <li><a class="icon icon-wallet" href="#">Credits</a>
                    </li>
                </ul>
            </nav>

<nav class="st-menu st-effect-6" id="menu-6">
                <h2 class="icon icon-stack">Sidebar</h2>
                <ul>
                    <li><a class="icon icon-data" href="#">Data Management</a>
                    </li>
                    <li><a class="icon icon-location" href="#">Location</a>
                    </li>
                    <li><a class="icon icon-study" href="#">Study</a>
                    </li>
                    <li><a class="icon icon-photo" href="#">Collections</a>
                    </li>
                    <li><a class="icon icon-wallet" href="#">Credits</a>
                    </li>
                </ul>
            </nav>

<nav class="st-menu st-effect-7" id="menu-7">
                <h2 class="icon icon-lab">Sidebar</h2>
                <ul>
                    <li><a class="icon icon-data" href="#">Data Management</a>
                    </li>
                    <li><a class="icon icon-location" href="#">Location</a>
                    </li>
                    <li><a class="icon icon-study" href="#">Study</a>
                    </li>
                    <li><a class="icon icon-photo" href="#">Collections</a>
                    </li>
                    <li><a class="icon icon-wallet" href="#">Credits</a>
                    </li>
                </ul>
            </nav>

<nav class="st-menu st-effect-8" id="menu-8">
                <h2 class="icon icon-stack">Sidebar</h2>
                <ul>
                    <li><a class="icon icon-data" href="#">Data Management</a>
                    </li>
                    <li><a class="icon icon-location" href="#">Location</a>
                    </li>
                    <li><a class="icon icon-study" href="#">Study</a>
                    </li>
                    <li><a class="icon icon-photo" href="#">Collections</a>
                    </li>
                    <li><a class="icon icon-wallet" href="#">Credits</a>
                    </li>
                </ul>
            </nav>

<nav class="st-menu st-effect-14" id="menu-14">
                <h2 class="icon icon-stack">Sidebar</h2>
                <ul>
                    <li><a class="icon icon-data" href="#">Data Management</a>
                    </li>
                    <li><a class="icon icon-location" href="#">Location</a>
                    </li>
                    <li><a class="icon icon-study" href="#">Study</a>
                    </li>
                    <li><a class="icon icon-photo" href="#">Collections</a>
                    </li>
                    <li><a class="icon icon-wallet" href="#">Credits</a>
                    </li>
                </ul>
            </nav>

<div class="st-content">
                
                <div class="st-content-inner">
                    
                    <header class="codrops-header">
                        <h1>Sidebar Transitions <span>Transition effects for off-canvas views</span></h1>
                    </header>
                    <div class="main clearfix">
                        <div id="st-trigger-effects" class="column">
                            <button data-effect="st-effect-1">Slide in on top</button>
                            <button data-effect="st-effect-2">Reveal</button>
                            <button data-effect="st-effect-3">Push</button>
                            <button data-effect="st-effect-4">Slide along</button>
                            <button data-effect="st-effect-5">Reverse slide out</button>
                            <button data-effect="st-effect-6">Rotate pusher</button>
                            <button data-effect="st-effect-7">3D rotate in</button>
                            <button data-effect="st-effect-8">3D rotate out</button>
                            <button data-effect="st-effect-9">Scale down pusher</button>
                            <button data-effect="st-effect-10">Scale Up</button>
                            <button data-effect="st-effect-11">Scale &amp; rotate pusher</button>
                            <button data-effect="st-effect-12">Open door</button>
                            <button data-effect="st-effect-13">Fall down</button>
                            <button data-effect="st-effect-14">Delayed 3D Rotate</button>
                        </div>
                        <div class="column">
                            <p>Sidebar menus or off-canvas navigations can be revealed in many creative ways.</p>
                            <p>Here is some inspiration for showing them in style using CSS transitions.</p>
                        </div>
                    </div>
                    
                </div>
                
            </div>
            
        </div>
        
    </div>
    
    <script src="https://tympanus.net/Development/SidebarTransitions/js/classie.js"></script>
    <script src="https://tympanus.net/Development/SidebarTransitions/js/sidebarEffects.js"></script>
</body>

</html>

Transitions for Off-Canvas Navigations 包含一些常用的边栏入场动画：滑入、缩放、推入、3D旋转、开门、下落等。

模板，菜单

编辑器支持Emmet

快捷键

Transitions for Off-Canvas Navigations 包含一些常用的边栏入场动画：滑入、缩放、推入、3D旋转、开门、下落等。

模板，菜单

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：