使用SVG和CSS3实现的一组箭头浏览样式

Arrow Navigation Styles 幻灯片中常用箭头元素来切换/浏览图片或当前页面。本例是一组箭头交互效果。使用SVG图标创建箭头，使用CSS3渐变和动画实现交互效果。

UI，教程，设计

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

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

<body>
    <div class="svg-wrap">
        <svg width="64" height="64" viewBox="0 0 64 64">
            <path id="arrow-left-1" d="M46.077 55.738c0.858 0.867 0.858 2.266 0 3.133s-2.243 0.867-3.101 0l-25.056-25.302c-0.858-0.867-0.858-2.269 0-3.133l25.056-25.306c0.858-0.867 2.243-0.867 3.101 0s0.858 2.266 0 3.133l-22.848 23.738 22.848 23.738z" />
        </svg>
        <svg width="64" height="64" viewBox="0 0 64 64">
            <path id="arrow-right-1" d="M17.919 55.738c-0.858 0.867-0.858 2.266 0 3.133s2.243 0.867 3.101 0l25.056-25.302c0.858-0.867 0.858-2.269 0-3.133l-25.056-25.306c-0.858-0.867-2.243-0.867-3.101 0s-0.858 2.266 0 3.133l22.848 23.738-22.848 23.738z" />
        </svg>
        <svg width="64" height="64" viewBox="0 0 64 64">
            <path id="arrow-left-2" d="M26.667 10.667q1.104 0 1.885 0.781t0.781 1.885q0 1.125-0.792 1.896l-14.104 14.104h41.563q1.104 0 1.885 0.781t0.781 1.885-0.781 1.885-1.885 0.781h-41.563l14.104 14.104q0.792 0.771 0.792 1.896 0 1.104-0.781 1.885t-1.885 0.781q-1.125 0-1.896-0.771l-18.667-18.667q-0.771-0.813-0.771-1.896t0.771-1.896l18.667-18.667q0.792-0.771 1.896-0.771z"
            />
        </svg>
        <svg width="64" height="64" viewBox="0 0 64 64">
            <path id="arrow-right-2" d="M37.333 10.667q1.125 0 1.896 0.771l18.667 18.667q0.771 0.771 0.771 1.896t-0.771 1.896l-18.667 18.667q-0.771 0.771-1.896 0.771-1.146 0-1.906-0.76t-0.76-1.906q0-1.125 0.771-1.896l14.125-14.104h-41.563q-1.104 0-1.885-0.781t-0.781-1.885 0.781-1.885 1.885-0.781h41.563l-14.125-14.104q-0.771-0.771-0.771-1.896 0-1.146 0.76-1.906t1.906-0.76z"
            />
        </svg>
        <svg width="64" height="64" viewBox="0 0 64 64">
            <path id="arrow-left-3" d="M44.797 17.28l0.003 29.44-25.6-14.72z" />
        </svg>
        <svg width="64" height="64" viewBox="0 0 64 64">
            <path id="arrow-right-3" d="M19.203 17.28l-0.003 29.44 25.6-14.72z" />
        </svg>
        <svg width="64" height="64" viewBox="0 0 64 64">
            <path id="arrow-left-4" d="M15.946 48l0.003-10.33 47.411 0.003v-11.37h-47.414l0.003-10.304-15.309 16z" />
        </svg>
        <svg width="64" height="64" viewBox="0 0 64 64">
            <path id="arrow-right-4" d="M48.058 48l-0.003-10.33-47.414 0.003v-11.37h47.418l-0.003-10.304 15.306 16z" />
        </svg>
        <svg width="64" height="64" viewBox="0 0 64 64">
            <path id="arrow-left-5" d="M48 10.667q1.104 0 1.885 0.781t0.781 1.885-0.792 1.896l-16.771 16.771 16.771 16.771q0.792 0.792 0.792 1.896t-0.781 1.885-1.885 0.781q-1.125 0-1.896-0.771l-18.667-18.667q-0.771-0.771-0.771-1.896t0.771-1.896l18.667-18.667q0.771-0.771 1.896-0.771zM32 10.667q1.104 0 1.885 0.781t0.781 1.885-0.792 1.896l-16.771 16.771 16.771 16.771q0.792 0.792 0.792 1.896t-0.781 1.885-1.885 0.781q-1.125 0-1.896-0.771l-18.667-18.667q-0.771-0.771-0.771-1.896t0.771-1.896l18.667-18.667q0.771-0.771 1.896-0.771z"
            />
        </svg>
        <svg width="64" height="64" viewBox="0 0 64 64">
            <path id="arrow-right-5" d="M29.333 10.667q1.104 0 1.875 0.771l18.667 18.667q0.792 0.792 0.792 1.896t-0.792 1.896l-18.667 18.667q-0.771 0.771-1.875 0.771t-1.885-0.781-0.781-1.885q0-1.125 0.771-1.896l16.771-16.771-16.771-16.771q-0.771-0.771-0.771-1.896 0-1.146 0.76-1.906t1.906-0.76zM13.333 10.667q1.104 0 1.875 0.771l18.667 18.667q0.792 0.792 0.792 1.896t-0.792 1.896l-18.667 18.667q-0.771 0.771-1.875 0.771t-1.885-0.781-0.781-1.885q0-1.125 0.771-1.896l16.771-16.771-16.771-16.771q-0.771-0.771-0.771-1.896 0-1.146 0.76-1.906t1.906-0.76z"
            />
        </svg>
    </div>
    <div class="container">
        <header class="codrops-header">
            <h1>Arrow Navigation Styles <span>Ideas for arrow navigation effects and styles</span><span class="info">Scroll down</span></h1>
        </header>
        <section class="color-1">
            <h2>Slide</h2>
            <nav class="nav-slide">
                <a class="prev" href="/item1">
                    <span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-left-1"></svg></span>
                    <div>
                        <h3>Nothing to Loose <span>by Zach Wallis</span></h3>
                        <img src="https://tympanus.net/Development/ArrowNavigationStyles/img/1.png" alt="Previous thumb" />
                    </div>
                </a>
                <a class="next" href="/item3">
                    <span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-right-1"></svg></span>
                    <div>
                        <h3>Metro Love Stories <span>by Andrea Satorini</span></h3>
                        <img src="https://tympanus.net/Development/ArrowNavigationStyles/img/2.png" alt="Next thumb" />
                    </div>
                </a>
            </nav>
        </section>
        <section class="color-2">
            <h2>Image Bar</h2>
            <nav class="nav-imgbar">
                <a class="prev" href="/item1">
                    <span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-left-2"></svg></span>
                    <img src="https://tympanus.net/Development/ArrowNavigationStyles/img/3.jpg" alt="Previous thumb" />
                </a>
                <a class="next" href="/item3">
                    <span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-right-2"></svg></span>
                    <img src="https://tympanus.net/Development/ArrowNavigationStyles/img/4.jpg" alt="Next thumb" />
                </a>
            </nav>
        </section>
        <section class="color-3">
            <h2>Circle Pop</h2>
            <nav class="nav-circlepop">
                <a class="prev" href="/item1">
                    <span class="icon-wrap"></span>
                </a>
                <a class="next" href="/item3">
                    <span class="icon-wrap"></span>
                </a>
            </nav>
        </section>
        <section class="color-4">
            <h2>Round Slide</h2>
            <nav class="nav-roundslide">
                <a class="prev" href="/item1">
                    <span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-left-4"></svg></span>
                    <h3>Hannah Leigh</h3>
                </a>
                <a class="next" href="/item3">
                    <span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-right-4"></svg></span>
                    <h3>Greg Kennedy</h3>
                </a>
            </nav>
        </section>
        <section class="color-5">
            <h2>Split</h2>
            <nav class="nav-slit">
                <a class="prev" href="/item1">
                    <span class="icon-wrap"><svg class="icon" width="22" height="22" viewBox="0 0 64 64"><use xlink:href="#arrow-left-1"></svg></span>
                    <div>
                        <h3>City Lights</h3>
                        <img src="https://tympanus.net/Development/ArrowNavigationStyles/img/5.png" alt="Previous thumb" />
                    </div>
                </a>
                <a class="next" href="/item3">
                    <span class="icon-wrap"><svg class="icon" width="22" height="22" viewBox="0 0 64 64"><use xlink:href="#arrow-right-1"></svg></span>
                    <div>
                        <h3>Street Hills</h3>
                        <img src="https://tympanus.net/Development/ArrowNavigationStyles/img/6.png" alt="Next thumb" />
                    </div>
                </a>
            </nav>
        </section>
        <section class="color-6">
            <h2>Reveal</h2>
            <nav class="nav-reveal">
                <a class="prev" href="/item1">
                    <span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-left-3"></svg></span>
                    <div>
                        <h3>Moments of Freedom and Other Stories <span>by Marina Wasilovna</span></h3>
                        <img src="https://tympanus.net/Development/ArrowNavigationStyles/img/7.png" alt="Previous thumb" />
                    </div>
                </a>
                <a class="next" href="/item3">
                    <span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-right-3"></svg></span>
                    <div>
                        <h3>Garage Rocket Ships for Sarah and Ben<span>by Aldous Morrison</span></h3>
                        <img src="https://tympanus.net/Development/ArrowNavigationStyles/img/8.png" alt="Next thumb" />
                    </div>
                </a>
            </nav>
        </section>
        <section class="color-7">
            <h2>Thumb Flip</h2>
            <nav class="nav-thumbflip">
                <a class="prev" href="/item1">
                    <span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-left-5"></svg></span>
                    <img src="https://tympanus.net/Development/ArrowNavigationStyles/img/9.png" alt="Previous thumb" />
                </a>
                <a class="next" href="/item3">
                    <span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-right-5"></svg></span>
                    <img src="https://tympanus.net/Development/ArrowNavigationStyles/img/10.png" alt="Next thumb" />
                </a>
            </nav>
        </section>
        <section class="color-8">
            <h2>Double Flip</h2>
            <nav class="nav-doubleflip">
                <a class="prev" href="/item1">
                    <span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-left-5"></svg></span>
                    <div>
                        <img src="https://tympanus.net/Development/ArrowNavigationStyles/img/11.png" alt="Previous thumb" />
                        <h3>Party Girl</h3>
                    </div>
                </a>
                <a class="next" href="/item3">
                    <span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-right-5"></svg></span>
                    <div>
                        <img src="https://tympanus.net/Development/ArrowNavigationStyles/img/12.png" alt="Next thumb" />
                        <h3>True Honey</h3>
                    </div>
                </a>
            </nav>
        </section>
        <section class="color-9">
            <h2>Multi Thumb</h2>
            <nav class="nav-multithumb">
                <a class="prev" href="/item1">
                    <span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-left-3"></svg></span>
                    <div>
                        <img src="https://tympanus.net/Development/ArrowNavigationStyles/img/13.png" alt="Thumb 1" />
                        <img src="https://tympanus.net/Development/ArrowNavigationStyles/img/14.png" alt="Thumb 2" />
                        <img src="https://tympanus.net/Development/ArrowNavigationStyles/img/15.png" alt="Thumb 3" />
                    </div>
                </a>
                <a class="next" href="/item3">
                    <span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-right-3"></svg></span>
                    <div>
                        <img src="https://tympanus.net/Development/ArrowNavigationStyles/img/16.png" alt="Thumb 1" />
                        <img src="https://tympanus.net/Development/ArrowNavigationStyles/img/17.png" alt="Thumb 2" />
                        <img src="https://tympanus.net/Development/ArrowNavigationStyles/img/18.png" alt="Thumb 3" />
                    </div>
                </a>
            </nav>
        </section>
        <section class="color-5">
            <h2>Circle Slide</h2>
            <nav class="nav-circleslide">
                <a class="prev" href="/item1">
                    <span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-left-1"></svg></span>
                    <div><img src="https://tympanus.net/Development/ArrowNavigationStyles/img/23.png" alt="Previous thumb" />
                    </div>
                </a>
                <a class="next" href="/item3">
                    <span class="icon-wrap"><svg class="icon" width="32" height="32" viewBox="0 0 64 64"><use xlink:href="#arrow-right-1"></svg></span>
                    <div><img src="https://tympanus.net/Development/ArrowNavigationStyles/img/24.png" alt="Next thumb" />
                    </div>
                </a>
            </nav>
        </section>
        <section class="color-3">
            <h2>Grow Pop</h2>
            <nav class="nav-growpop">
                <a class="prev" href="/item1">
                    <span class="icon-wrap"><svg class="icon" width="24" height="24" viewBox="0 0 64 64"><use xlink:href="#arrow-left-2"></svg></span>
                    <div>
                        <span>Previous Story</span>
                        <h3>Child full of grace saviour of the human race</h3>
                        <p>by Holly Brighton</p>
                        <img src="https://tympanus.net/Development/ArrowNavigationStyles/img/22.png" alt="Previous thumb" />
                    </div>
                </a>
                <a class="next" href="/item3">
                    <span class="icon-wrap"><svg class="icon" width="24" height="24" viewBox="0 0 64 64"><use xlink:href="#arrow-right-2"></svg></span>
                    <div>
                        <span>Next Story</span>
                        <h3>Ancient rulage of grains and the trees of the night</h3>
                        <p>by Mark Ustinov</p>
                        <img src="https://tympanus.net/Development/ArrowNavigationStyles/img/21.png" alt="Next thumb" />
                    </div>
                </a>
            </nav>
        </section>
        <section class="color-4">
            <h2>Diamond</h2>
            <nav class="nav-diamond">
                <a class="prev" href="/item1">
                    <span class="icon-wrap"><svg class="icon" width="28" height="28" viewBox="0 0 64 64"><use xlink:href="#arrow-left-1"></svg></span>
                    <div><img src="https://tympanus.net/Development/ArrowNavigationStyles/img/10.png" alt="Previous thumb" />
                    </div>
                </a>
                <a class="next" href="/item3">
                    <span class="icon-wrap"><svg class="icon" width="28" height="28" viewBox="0 0 64 64"><use xlink:href="#arrow-right-1"></svg></span>
                    <div><img src="https://tympanus.net/Development/ArrowNavigationStyles/img/7.png" alt="Next thumb" />
                    </div>
                </a>
            </nav>
        </section>
        <section class="color-10">
            <h2>Fill Slide</h2>
            <nav class="nav-fillslide">
                <a class="prev" href="/item1">
                    <span class="icon-wrap"><svg class="icon" width="24" height="24" viewBox="0 0 64 64"><use xlink:href="#arrow-left-4"></svg></span>
                    <div>
                        <h3>Hunger at her heels freedom in her eyes</h3>
                        <span>by Maria S. Walton</span>
                        <img src="https://tympanus.net/Development/ArrowNavigationStyles/img/19.png" alt="Previous thumb" />
                    </div>
                </a>
                <a class="next" href="/item3">
                    <span class="icon-wrap"><svg class="icon" width="24" height="24" viewBox="0 0 64 64"><use xlink:href="#arrow-right-4"></svg></span>
                    <div>
                        <h3>She dances on her knees pirate prince at her side</h3>
                        <span>by Emily Van Groen</span>
                        <img src="https://tympanus.net/Development/ArrowNavigationStyles/img/20.png" alt="Next thumb" />
                    </div>
                </a>
            </nav>
        </section>
        <section class="color-1">
            <h2>Fill Path</h2>
            <nav class="nav-fillpath">
                <a class="prev" href="/item1">
                    <span class="icon-wrap"></span>
                    <h3><strong>Danny</strong> Fleming</h3>
                </a>
                <a class="next" href="/item3">
                    <span class="icon-wrap"></span>
                    <h3><strong>Susan</strong> Walter</h3>
                </a>
            </nav>
        </section>
    </div>
    
    <script>
        // For Demo purposes only
        [].slice.call(document.querySelectorAll('nav > a')).forEach(function(el) {
            el.addEventListener('click', function(ev) {
                ev.preventDefault();
            });
        });
    </script>
</body>

</html>

Arrow Navigation Styles 幻灯片中常用箭头元素来切换/浏览图片或当前页面。本例是一组箭头交互效果。使用SVG图标创建箭头，使用CSS3渐变和动画实现交互效果。

UI，教程，设计

编辑器支持Emmet

快捷键

Arrow Navigation Styles 幻灯片中常用箭头元素来切换/浏览图片或当前页面。本例是一组箭头交互效果。使用SVG图标创建箭头，使用CSS3渐变和动画实现交互效果。

UI，教程，设计

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：