Vivus.JS SVG 购物图标绘制动画 - 踏得网

可用于电子商务类网站的动态购物图标。

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,800,600,300);
* {
    font-family: "Open Sans";
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
header {
    margin: 0;
    width: 100%;
    padding: 5vw;
    font-size: 3em;
}
header h1 {
    font-weight: 900;
    margin: 0;
    padding: 0;
    text-align: center;
}
.item {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #6c9;
    max-width: 50em;
    margin: 2.5vh auto;
    color: #f1f1f1;
}
.item .svg {
    width: 200px;
}
.item .svg svg {
    max-width: 100%;
    stroke: #f1f1f1;
}
.item .text {
    font-size: 2.25em;
    max-width: 70%;
    padding: 1em;
    font-weight: 300;
    text-align: left;
}

HTML

<header>
    <h1>Features</h1>
</header>

<div class="item">
    <div class="svg">
        <svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 250" enable-background="new 0 0 250 250" xml:space="preserve">
            <g>

<circle fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" cx="85.1" cy="204.7" r="16.5" />

<circle fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" cx="201.4" cy="204.7" r="16.5" />

<line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="85.1" y1="188.2" x2="201.4" y2="188.2" />

<line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="113.5" y1="53.4" x2="60.2" y2="53.4" />
                <path fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M83.1,155.2l112.6,0.3
		c2.8-0.2,5.2-2,5.9-4.4l21.6-90.7c0.9-3.6-2.1-7-6.3-7h-44.3" />
                <polyline fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" points="85.1,155.2 
		54.1,28.7 26.6,28.7 	" />
                <path fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M85.1,155.2
		c-9.1,0-16.5,7.4-16.5,16.5c0,9.1,7.4,16.5,16.5,16.5" />
                <g>

<line stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="158.3" y1="35" x2="121.4" y2="71.8" />

<line stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="121.4" y1="35" x2="158.3" y2="71.8" />
                </g>
            </g>
        </svg>

</div>
    <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium dignissimos, expedita eveniet rem similique deserunt deleniti maxime ipsam ratione distinctio.
    </div>
</div>

<div class="item">
    <div class="svg">

<svg version="1.1" id="Layer_2" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 250" enable-background="new 0 0 250 250" xml:space="preserve">
            <g>
                <path fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M210.5,114.6v80.8
		c0,8.2-6.7,14.9-14.9,14.9H54.4c-8.2,0-14.9-6.7-14.9-14.9v-80.8" />
                <g>
                    <path fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M204,121H46
			c-3.6,0-6.4-2.9-6.4-6.4V97.8c0-3.6,2.9-6.4,6.4-6.4H204c3.6,0,6.4,2.9,6.4,6.4v16.9C210.5,118.2,207.6,121,204,121z" />

<line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="42.1" y1="92.6" x2="69.3" y2="121" />

<line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="87.8" y1="91.3" x2="117.6" y2="121" />

<line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="132.4" y1="91.3" x2="162.2" y2="121" />

<line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="180.7" y1="91.3" x2="210.5" y2="121" />
                </g>
                <g>
                    <path fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M204.9,69.2L47.7,83.4
			c-3.1,0.3-5.8-2-6.1-5.1L40,60c-0.3-3.1,2-5.8,5.1-6.1l157.2-14.2c3.1-0.3,5.8,2,6.1,5.1l1.6,18.3C210.2,66.2,208,68.9,204.9,69.2
			z" />

<line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="45.6" y1="59.6" x2="71.4" y2="81.2" />

<line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="87.1" y1="50.2" x2="119" y2="76.9" />

<line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="131" y1="46.2" x2="162.9" y2="73" />

<line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="178.6" y1="41.9" x2="206.4" y2="65.2" />
                </g>
                <g>

<line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="69.3" y1="150.8" x2="180.7" y2="150.8" />

<line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="69.3" y1="173.1" x2="180.7" y2="173.1" />
                </g>
            </g>
        </svg>

</div>
    <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium dignissimos, expedita eveniet rem similique deserunt deleniti maxime ipsam ratione distinctio.
    </div>
</div>

<div class="item">
    <div class="svg">
        <svg version="1.1" id="Layer_3" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 250" enable-background="new 0 0 250 250" xml:space="preserve">
            <path fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M138.4,237H54.7
	c-1.4,0-2.6-1.2-2.6-2.6V79.7c0-1.4,1.2-2.6,2.6-2.6h83.6c1.4,0,2.6,1.2,2.6,2.6v154.7C141,235.9,139.8,237,138.4,237z" />
            <line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="53" y1="103" x2="141" y2="103" />
            <line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="52" y1="210" x2="140" y2="210" />
            <line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="88" y1="92" x2="110" y2="92" />
            <line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="77" y1="92" x2="85" y2="92" />
            <line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="88" y1="224" x2="99" y2="224" />
            <g>
                <path fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M108.4,68.3V19.7
		c0-4.3,3.4-7.7,7.7-7.7h73.4c4.3,0,7.7,3.4,7.7,7.7v144.5c0,4.3-3.4,7.7-7.7,7.7h-36.7" />

<line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="110" y1="37" x2="197" y2="37" />

<line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="154" y1="147" x2="197" y2="147" />

<line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="151" y1="23" x2="170" y2="23" />

<line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="137" y1="23" x2="143" y2="23" />
                <polyline fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" points="151,158 
		154.3,158 162,158 	" />
            </g>
        </svg>

</div>
    <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium dignissimos, expedita eveniet rem similique deserunt deleniti maxime ipsam ratione distinctio.
    </div>
</div>

<div class="item">
    <div class="svg">

<?xml version="1.0" encoding="utf-8" ?>
        
        <svg version="1.1" id="Layer_4" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 250" enable-background="new 0 0 250 250" xml:space="preserve">
            <g>

<circle fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" cx="85.1" cy="204.7" r="16.5" />

<circle fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" cx="201.4" cy="204.7" r="16.5" />

<line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="85.1" y1="188.2" x2="201.4" y2="188.2" />

<line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="113.5" y1="53.4" x2="60.2" y2="53.4" />
                <path fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M83.1,155.2l112.6,0.3
		c2.8-0.2,5.2-2,5.9-4.4l21.6-90.7c0.9-3.6-2.1-7-6.3-7h-44.3" />
                <polyline fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" points="85.1,155.2 
		54.1,28.7 26.6,28.7 	" />
                <path fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M85.1,155.2
		c-9.1,0-16.5,7.4-16.5,16.5c0,9.1,7.4,16.5,16.5,16.5" />
                <g>

<line stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="158.3" y1="35" x2="121.4" y2="71.8" />

<line stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="121.4" y1="35" x2="158.3" y2="71.8" />
                </g>
            </g>
        </svg>

</div>
    <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium dignissimos, expedita eveniet rem similique deserunt deleniti maxime ipsam ratione distinctio.
    </div>
</div>

<div class="item">
    <div class="svg">

<svg version="1.1" id="Layer_5" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250 250" enable-background="new 0 0 250 250" xml:space="preserve">
            <g>
                <path fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M210.5,114.6v80.8
		c0,8.2-6.7,14.9-14.9,14.9H54.4c-8.2,0-14.9-6.7-14.9-14.9v-80.8" />
                <g>
                    <path fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M204,121H46
			c-3.6,0-6.4-2.9-6.4-6.4V97.8c0-3.6,2.9-6.4,6.4-6.4H204c3.6,0,6.4,2.9,6.4,6.4v16.9C210.5,118.2,207.6,121,204,121z" />

<line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="42.1" y1="92.6" x2="69.3" y2="121" />

<line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="87.8" y1="91.3" x2="117.6" y2="121" />

<line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="132.4" y1="91.3" x2="162.2" y2="121" />

<line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="180.7" y1="91.3" x2="210.5" y2="121" />
                </g>
                <g>
                    <path fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M204.9,69.2L47.7,83.4
			c-3.1,0.3-5.8-2-6.1-5.1L40,60c-0.3-3.1,2-5.8,5.1-6.1l157.2-14.2c3.1-0.3,5.8,2,6.1,5.1l1.6,18.3C210.2,66.2,208,68.9,204.9,69.2
			z" />

<line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="45.6" y1="59.6" x2="71.4" y2="81.2" />

<line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="87.1" y1="50.2" x2="119" y2="76.9" />

<line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="131" y1="46.2" x2="162.9" y2="73" />

<line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="178.6" y1="41.9" x2="206.4" y2="65.2" />
                </g>
                <g>

<line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="69.3" y1="150.8" x2="180.7" y2="150.8" />

<line fill="none" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" x1="69.3" y1="173.1" x2="180.7" y2="173.1" />
                </g>
            </g>
        </svg>
    </div>
    <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium dignissimos, expedita eveniet rem similique deserunt deleniti maxime ipsam ratione distinctio.
    </div>
</div>
<script src=' //cdn.jsdelivr.net/vivus/0.1.2/vivus.min.js'></script>