使用Snap.svg实现一组SVG动画图标

Animated SVG Icons with Snap.svg 非常丰富实用的一组图标动画，包含播放、全屏缩放、笑脸、时钟、滑块、旗帜、喇叭、锁、沙漏、放大镜、电脑/手机、信封、方向箭头以及汉堡菜单等。

图标

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

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

<body>
    <div class="container">
        <header>
            <h1>Animated SVG Icons <span>Using Snap.svg to animate SVG icons</span></h1>
        </header>
        <section class="si-icons si-icons-default">
            <span class="si-icon si-icon-nav-left-arrow" data-icon-name="navLeftArrow"></span>
            <span class="si-icon si-icon-nav-up-arrow" data-icon-name="navUpArrow"></span>
            <span class="si-icon si-icon-right-arrow" data-icon-name="rightArrow"></span>
            <span class="si-icon si-icon-down-arrow" data-icon-name="downArrow"></span>
            <span class="si-icon si-icon-hamburger" data-icon-name="hamburger"></span>
            <span class="si-icon si-icon-hamburger-cross" data-icon-name="hamburgerCross"></span>
            <span class="si-icon si-icon-plus" data-icon-name="plus"></span>
            <span class="si-icon si-icon-plus-cross" data-icon-name="plusCross"></span>
            <span class="si-icon si-icon-maximize" data-icon-name="maximize"></span>
            <span class="si-icon si-icon-maximize-rotate" data-icon-name="maximizeRotate"></span>
            <span class="si-icon si-icon-contract" data-icon-name="contract"></span>
            <span class="si-icon si-icon-play" data-icon-name="play"></span>
            <span class="si-icon si-icon-monitor" data-icon-name="monitor"></span>
            <span class="si-icon si-icon-trash" data-icon-name="trash"></span>
            <span class="si-icon si-icon-flag" data-icon-name="flag"></span>
            <span class="si-icon si-icon-volume" data-icon-name="volume"></span>
            <span class="si-icon si-icon-clock" data-icon-name="clock"></span>
            <span class="si-icon si-icon-mail" data-icon-name="mail"></span>
            <span class="si-icon si-icon-smiley" data-icon-name="smiley"></span>
            <span class="si-icon si-icon-equalizer" data-icon-name="equalizer"></span>
            <span class="si-icon si-icon-glass-empty" data-icon-name="glass"></span>
            <span class="si-icon si-icon-lock" data-icon-name="padlock"></span>
            <span class="si-icon si-icon-hourglass" data-icon-name="hourglass"></span>
            <span class="si-icon si-icon-zoom" data-icon-name="zoom"></span>
        </section>
        <section class="si-icons si-icons-easing">
            <h2>With different speeds &amp; easings</h2>
            <span class="si-icon si-icon-nav-left-arrow" data-icon-name="navLeftArrow"></span>
            <span class="si-icon si-icon-hamburger" data-icon-name="hamburger"></span>
            <span class="si-icon si-icon-plus" data-icon-name="plus"></span>
            <span class="si-icon si-icon-volume" data-icon-name="volume"></span>
            <span class="si-icon si-icon-hourglass" data-icon-name="hourglass"></span>
            <span class="si-icon si-icon-equalizer" data-icon-name="equalizer"></span>
            <span class="si-icon si-icon-hamburger-cross" data-icon-name="hamburgerCross"></span>
            <span class="si-icon si-icon-maximize" data-icon-name="maximize"></span>
            <span class="si-icon si-icon-contract" data-icon-name="contract"></span>
            <span class="si-icon si-icon-trash" data-icon-name="trash"></span>
            <span class="si-icon si-icon-clock" data-icon-name="clock"></span>
            <span class="si-icon si-icon-glass-empty" data-icon-name="glass"></span>
        </section>
        <section class="si-icons si-icons-hover">
            <h2>Different size &amp; animation on hover</h2>
            <span class="si-icon si-icon-clock" data-icon-name="clock"></span>
            <span class="si-icon si-icon-zoom" data-icon-name="zoom"></span>
            <span class="si-icon si-icon-flag" data-icon-name="flag"></span>
            <span class="si-icon si-icon-equalizer" data-icon-name="equalizer"></span>
            <span class="si-icon si-icon-hamburger" data-icon-name="hamburger"></span>
            <span class="si-icon si-icon-maximize" data-icon-name="maximize"></span>
        </section>
    </div>
    
    <script src="/uploads/160201/svgicons-config.js"></script>
    <script src="https://tympanus.net/Development/AnimatedSVGIcons/js/svgicons.js"></script>
    <script>
        (function() {
            // initialize all

[].slice.call(document.querySelectorAll('.si-icons-default > .si-icon')).forEach(function(el) {
                var svgicon = new svgIcon(el, svgIconConfig);
            });

new svgIcon(document.querySelector('.si-icons-easing .si-icon-nav-left-arrow'), svgIconConfig, {
                easing: mina.backin
            });
            new svgIcon(document.querySelector('.si-icons-easing .si-icon-hamburger'), svgIconConfig, {
                easing: mina.backin
            });
            new svgIcon(document.querySelector('.si-icons-easing .si-icon-plus'), svgIconConfig, {
                easing: mina.backin
            });
            new svgIcon(document.querySelector('.si-icons-easing .si-icon-volume'), svgIconConfig, {
                easing: mina.backin
            });
            new svgIcon(document.querySelector('.si-icons-easing .si-icon-hourglass'), svgIconConfig, {
                easing: mina.backin
            });
            new svgIcon(document.querySelector('.si-icons-easing .si-icon-equalizer'), svgIconConfig, {
                easing: mina.backin
            });
            new svgIcon(document.querySelector('.si-icons-easing .si-icon-hamburger-cross'), svgIconConfig, {
                easing: mina.elastic,
                speed: 600
            });
            new svgIcon(document.querySelector('.si-icons-easing .si-icon-trash'), svgIconConfig, {
                easing: mina.elastic,
                speed: 600
            });
            new svgIcon(document.querySelector('.si-icons-easing .si-icon-clock'), svgIconConfig, {
                easing: mina.elastic,
                speed: 600
            });
            new svgIcon(document.querySelector('.si-icons-easing .si-icon-maximize'), svgIconConfig, {
                easing: mina.elastic,
                speed: 600
            });
            new svgIcon(document.querySelector('.si-icons-easing .si-icon-contract'), svgIconConfig, {
                easing: mina.elastic,
                speed: 600
            });
            new svgIcon(document.querySelector('.si-icons-easing .si-icon-glass-empty'), svgIconConfig, {
                easing: mina.elastic,
                speed: 600
            });

new svgIcon(document.querySelector('.si-icons-hover .si-icon-clock'), svgIconConfig, {
                easing: mina.backin,
                evtoggle: 'mouseover',
                size: {
                    w: 128,
                    h: 128
                }
            });
            new svgIcon(document.querySelector('.si-icons-hover .si-icon-hamburger'), svgIconConfig, {
                easing: mina.backin,
                evtoggle: 'mouseover',
                size: {
                    w: 128,
                    h: 128
                }
            });
            new svgIcon(document.querySelector('.si-icons-hover .si-icon-flag'), svgIconConfig, {
                easing: mina.backin,
                evtoggle: 'mouseover',
                size: {
                    w: 128,
                    h: 128
                }
            });
            new svgIcon(document.querySelector('.si-icons-hover .si-icon-zoom'), svgIconConfig, {
                easing: mina.backin,
                evtoggle: 'mouseover',
                size: {
                    w: 128,
                    h: 128
                }
            });
            new svgIcon(document.querySelector('.si-icons-hover .si-icon-maximize'), svgIconConfig, {
                easing: mina.backin,
                evtoggle: 'mouseover',
                size: {
                    w: 128,
                    h: 128
                }
            });
            new svgIcon(document.querySelector('.si-icons-hover .si-icon-equalizer'), svgIconConfig, {
                easing: mina.backin,
                evtoggle: 'mouseover',
                size: {
                    w: 128,
                    h: 128
                }
            });
        })();
    </script>
</body>

</html>

Animated SVG Icons with Snap.svg 非常丰富实用的一组图标动画，包含播放、全屏缩放、笑脸、时钟、滑块、旗帜、喇叭、锁、沙漏、放大镜、电脑/手机、信封、方向箭头以及汉堡菜单等。

图标

编辑器支持Emmet

快捷键

Animated SVG Icons with Snap.svg 非常丰富实用的一组图标动画，包含播放、全屏缩放、笑脸、时钟、滑块、旗帜、喇叭、锁、沙漏、放大镜、电脑/手机、信封、方向箭头以及汉堡菜单等。

图标

使用SVG path实现图标的描边（绘制轮廓）动画

基于Paper.js和SVG的AngularJS动画图标

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：