单笔动画画作

One Line Drawing 使用SVG path和Velocity.js实现的一条线的汉堡、pizza等动画图标。

svg, path

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

$(function() {

var arraySvgIcons = [];
    // Go through the SVG icons path
    $('.svgIconPath').each(function(i, obj) {
        var elm = $(this).parents('.svgIcon');

//get path length
        var pathLength = this.getTotalLength();

//get name associated
        var name = $(elm).data('name');

//Define dashArray and dashOffset
        elm.css({
            'stroke-dasharray': pathLength,
            'stroke-dashoffset': pathLength
        });

// Push animation to sequence array
        arraySvgIcons.push({
            e: elm,
            p: {
                strokeDashoffset: '0px'
            },
            o: {
                duration: 4000,
                delay: 1000,
                loop: 1,
                begin: function(element) {
                    $(element).css('display', 'block');
                    //Get the name associated, split it and animate it
                    $('.nameContainer')
                        .html(name)
                        .blast({
                            delimiter: 'word'
                        })
                        .velocity('transition.slideUpIn', {
                            duration: 2000,
                            delay: 1000,
                            visibility: 'visible',
                            complete: function(element) {
                                $(element).velocity('transition.slideDownOut', {
                                    duration: 2000,
                                    delay: 4000,
                                });
                            }
                        })

},
                complete: function(element) {
                    $(element).css('display', 'none');
                },
            }
        });

});

// Intro animation
    $('.infoText')
        .blast({
            delimiter: 'character'
        })
        .velocity('transition.slideRightIn', {
            duration: 500,
            stagger: 100,
            delay: 1000,
            visibility: 'visible',
            complete: function() {
                $('.infoText').velocity({
                    top: '50px'
                }, {
                    duration: 700,
                    delay: 500,
                    complete: function() {
                        $.Velocity.RunSequence(arraySvgIcons);
                    }
                });
            }
        });

});

编译

CSS

HTML

</div>

One Line Drawing 使用SVG path和Velocity.js实现的一条线的汉堡、pizza等动画图标。

svg, path

编辑器支持Emmet

快捷键

One Line Drawing 使用SVG path和Velocity.js实现的一条线的汉堡、pizza等动画图标。

svg, path

使用SVG SMIL技术实现的人体瑜伽动作动画

一组SVG动画图标（电脑 | 轴承 | 钟表 | 笔尺 | 购物 | 办公）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：