使用SVG和CSS3实现的6个卡通动物动画肖像

小鸡、鱼缸里的鱼、小狗、小猫、乌龟和小老鼠。鼠标悬停呈现动效。

SVG,卡通，动物

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    -webkit-transition: .1s;
    -o-transition: .1s;
    transition: .1s;
}
body {
    margin: 0;
    padding: 0;
    height: 100%;
}
.wrapper {
    background: white;
    height: 80vh;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    /*            overflow: auto;*/
}
.wrapper div {
    padding: 40px;
}
/*Bird*/

.bird,
.fish,
.dog,
.cat,
.turtle,
.mouse {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 80px;
    cursor: pointer;
}
.bird .line,
.fish .line,
.dog .line,
.cat .line,
.turtle .line,
.mouse .line {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.bird .line path,
.fish .line path,
.dog .line path,
.cat .line path,
.turtle .line path,
.mouse .line path {
    fill: #F2C45A;
}
.bird:hover .line path,
.fish:hover .line path,
.dog:hover .line path,
.cat:hover .line path,
.turtle:hover .line path,
.mouse:hover .line path {
    fill: #553B2B;
}
.bird .back,
.fish .back,
.dog .back,
.cat .back,
.turtle .back,
.mouse .back {
    position: absolute;
    top: 0;
    left: 0;
}
.bird:hover .back,
.fish:hover .back,
.dog:hover .back,
.cat:hover .back,
.turtle:hover .back,
.mouse:hover .back {
    top: 2px;
    left: 4px;
}
.bird .back path,
.fish .back path,
.dog .back path,
.cat .back path,
.turtle .back path,
.mouse .back path {
    fill: #F2C45A;
    opacity: 0;
}
.bird:hover .back path,
.fish:hover .back path,
.dog:hover .back path,
.cat:hover .back path,
.turtle:hover .back path,
.mouse:hover .back path {
    opacity: 1;
}
.bird:hover .line .wing {
    -webkit-animation-name: wing;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: .2s;
}
.bird:hover {
    -webkit-animation-name: fly;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 2s;
}
.bird:hover .line .eye {
    -webkit-animation-name: eye;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 2s;
}
/*Animation*/

@-webkit-keyframes fly {
    0% {
        -webkit-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
        -o-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
    50% {
        -webkit-transform: translate(0px, 4px);
        -ms-transform: translate(0px, 4px);
        -o-transform: translate(0px, 4px);
        transform: translate(0px, 4px);
    }
    100% {
        -webkit-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
        -o-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
}
@-webkit-keyframes wing {
    0% {
        -webkit-transform: scaleY(1);
        -ms-transform: scaleY(1);
        -o-transform: scaleY(1);
        transform: scaleY(1);
    }
    50% {
        -webkit-transform: scaleY(1.05);
        -ms-transform: scaleY(1.05);
        -o-transform: scaleY(1.05);
        transform: scaleY(1.05);
    }
    100% {
        -webkit-transform: scaleY(1);
        -ms-transform: scaleY(1);
        -o-transform: scaleY(1);
        transform: scaleY(1);
    }
}
/*Fish*/

.fish:hover .back path {
    opacity: 1;
}
.fish:hover .line .bubble.b1 {
    -webkit-animation-name: bubble;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 4s;
}
.fish:hover .line .bubble.b2 {
    -webkit-animation-name: bubble;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 4.4s;
}
.fish:hover .line .bubble.b3 {
    -webkit-animation-name: bubble;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 4.6s;
}
.fish:hover .line .fisher {
    -webkit-animation-name: fish;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 2s;
}
/*Animation*/

@-webkit-keyframes fish {
    0% {
        -webkit-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
        -o-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
    50% {
        -webkit-transform: translate(0px, 2px);
        -ms-transform: translate(0px, 2px);
        -o-transform: translate(0px, 2px);
        transform: translate(0px, 2px);
    }
    100% {
        -webkit-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
        -o-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
}
@-webkit-keyframes bubble {
    0% {
        -webkit-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
        -o-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
        opacity: 1;
    }
    100% {
        -webkit-transform: translate(0px, -4px);
        -ms-transform: translate(0px, -4px);
        -o-transform: translate(0px, -4px);
        transform: translate(0px, -4px);
        opacity: 0;
    }
}
/*Dog*/

.dog:hover {
    -webkit-animation-name: dog;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 4s;
}
.dog:hover .line .left {
    -webkit-animation-name: ears;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 2s;
}
.dog:hover .line .right {
    -webkit-animation-name: ears;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 2s;
}
.dog:hover .line .eye {
    -webkit-animation-name: eye;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 2s;
}
.dog:hover .line .lang {
    -webkit-animation-name: lang;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: .3s;
}
/*Animation*/

@-webkit-keyframes ears {
    0% {
        -webkit-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
        -o-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
    50% {
        -webkit-transform: translate(0px, 2px);
        -ms-transform: translate(0px, 2px);
        -o-transform: translate(0px, 2px);
        transform: translate(0px, 2px);
    }
    100% {
        -webkit-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
        -o-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
}
@-webkit-keyframes lang {
    0% {
        -webkit-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
        -o-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
    50% {
        -webkit-transform: translate(0px, -1px);
        -ms-transform: translate(0px, -1px);
        -o-transform: translate(0px, -1px);
        transform: translate(0px, -1px);
    }
    100% {
        -webkit-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
        -o-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
}
@-webkit-keyframes eye {
    0% {
        opacity: 1;
    }
    5% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes dog {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    5% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    13% {
        -webkit-transform: rotate(2deg);
        -ms-transform: rotate(2deg);
        -o-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    15% {
        -webkit-transform: rotate(-4deg);
        -ms-transform: rotate(-4deg);
        -o-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    17% {
        -webkit-transform: rotate(4deg);
        -ms-transform: rotate(40deg);
        -o-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    20% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
/*Cat*/

.cat:hover {
    -webkit-animation-name: cat;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 3s;
}
.cat:hover .line .m1 {
    -webkit-animation-name: m1;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: .5s;
}
.cat:hover .line .m2 {
    -webkit-animation-name: m2;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: .5s;
}
.cat:hover .line .eye {
    -webkit-animation-name: eye;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 2s;
}
/*Animation*/

@-webkit-keyframes cat {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        -o-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
@-webkit-keyframes m1 {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(2deg);
        -ms-transform: rotate(1deg);
        -o-transform: rotate(1deg);
        transform: rotate(1deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
@-webkit-keyframes m2 {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(-1deg);
        -ms-transform: rotate(-1deg);
        -o-transform: rotate(-1deg);
        transform: rotate(-1deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
/*Turtle*/

.turtle:hover {
    -webkit-animation-name: turtle;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 2s;
}
.turtle:hover .line .head {
    -webkit-animation-name: head;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 2s;
}
.turtle:hover .line .eye {
    -webkit-animation-name: eye;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 2s;
}
.turtle:hover .line .tail {
    -webkit-animation-name: tail;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: .9s;
}
/*Animation*/

@-webkit-keyframes head {
    0% {
        -webkit-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
        -o-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
    50% {
        -webkit-transform: translate(1px, 2px);
        -ms-transform: translate(1px, 2px);
        -o-transform: translate(1px, 2px);
        transform: translate(1px, 2px);
    }
    100% {
        -webkit-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
        -o-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
    }
}
@-webkit-keyframes tail {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(-1deg);
        -ms-transform: rotate(-1deg);
        -o-transform: rotate(-1deg);
        transform: rotate(-1deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
@-webkit-keyframes turtle {
    0% {
        -webkit-transform: scaleY(1);
        -ms-transform: scaleY(1);
        -o-transform: scaleY(1);
        transform: scaleY(1);
    }
    50% {
        -webkit-transform: scaleY(1.02);
        -ms-transform: scaleY(1.02);
        -o-transform: scaleY(1.02);
        transform: scaleY(1.02);
    }
    100% {
        -webkit-transform: scaleY(1);
        -ms-transform: scaleY(1);
        -o-transform: scaleY(1);
        transform: scaleY(1);
    }
}
/*Mouse*/

.mouse:hover .line .eye {
    -webkit-animation-name: eye;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 2s;
}
.mouse:hover .line .tails {
    -webkit-animation-name: tails;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 3s;
}
.mouse:hover .line .ear {
    -webkit-animation-name: ear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 1s;
}
/*Animation*/

@-webkit-keyframes tails {
    0% {
        -webkit-transform: scaleY(1);
        -ms-transform: scaleY(1);
        -o-transform: scaleY(1);
        transform: scaleY(1);
    }
    12% {
        -webkit-transform: scaleY(.95);
        -ms-transform: scaleY(.95);
        -o-transform: scaleY(.95);
        transform: scaleY(.95);
    }
    15% {
        -webkit-transform: scaleY(1);
        -ms-transform: scaleY(1);
        -o-transform: scaleY(1);
        transform: scaleY(1);
    }
    18% {
        -webkit-transform: scaleY(.95);
        -ms-transform: scaleY(.95);
        -o-transform: scaleY(.95);
        transform: scaleY(.95);
    }
    20% {
        -webkit-transform: scaleY(1);
        -ms-transform: scaleY(1);
        -o-transform: scaleY(1);
        transform: scaleY(1);
    }
    100% {
        -webkit-transform: scaleY(1);
        -ms-transform: scaleY(1);
        -o-transform: scaleY(1);
        transform: scaleY(1);
    }
}
@-webkit-keyframes ear {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    5% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    13% {
        -webkit-transform: rotate(2deg);
        -ms-transform: rotate(2deg);
        -o-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    15% {
        -webkit-transform: rotate(-4deg);
        -ms-transform: rotate(-4deg);
        -o-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    17% {
        -webkit-transform: rotate(4deg);
        -ms-transform: rotate(40deg);
        -o-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    20% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

HTML

</div>
    </div>

</div>
        <div class="back">
            <svg version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" xmlns:a="https://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="73.3px" height="55.3px" viewBox="0 0 73.3 55.3" enable-background="new 0 0 73.3 55.3"
            xml:space="preserve">
                <defs>
                </defs>
                <g>
                    <path d="M73,40.1c-1.3-1.1-4.2-2.1-7.5-3c1-2.7,1.5-6.4,0.3-11.6c-0.3-1.3-0.7-2.6-1.2-3.8c1.1-3.9,5-19.7-0.5-21.5
		c-5-1.6-11.3,5.1-12.3,6.2C50,5.5,44,3.3,37.1,3.3c-3,0-5.8,0.4-8.3,1.2l-0.1,0c-0.1,0-0.4,0.2-0.9,0.5c-0.1-0.1-0.2-0.2-0.3-0.2
		C24.4,3.4,17,0,15.6,0c0,0,0,0,0,0c-0.1,0-0.3,0-0.4,0c-1.3,0-3.4,0-4.5,3c-1,2.8-1.7,14.2,0.4,19.1c0,0,0,0,0,0
		C9.3,25,8.3,28.3,8.8,33.1c-3.1,0.8-6.4,1.8-8.3,2.8c-0.5,0.3-0.7,0.9-0.4,1.4c0.2,0.3,0.5,0.5,0.9,0.5c0.2,0,0.3,0,0.5-0.1
		c1.8-0.9,4.7-1.8,7.7-2.6c0.3,1.7,0.8,3.2,1.4,4.6c-3.9,1.9-7.7,3.9-8.3,4.3c-0.5,0.3-0.6,0.9-0.4,1.4c0.2,0.3,0.5,0.5,0.9,0.5
		c0.2,0,0.3,0,0.5-0.1c1.6-0.9,4.9-2.6,8.2-4.2c0.6,1.1,1.2,2.1,1.9,3.1c-2.1,1.4-4.5,3.1-5.4,4.3c-0.3,0.4-0.3,1.1,0.2,1.4
		c0.2,0.1,0.4,0.2,0.6,0.2c0.3,0,0.6-0.1,0.8-0.4c0.8-1,3-2.6,5.1-4c2.1,2.4,4.2,3.9,5.5,4.4c0.2,0.1,0.6,0.3,1.1,0.5
		c2.9,1.3,9.8,4.4,17.1,4.4h0c2.2,0,4.3-0.3,6.2-0.9c5.5-1.6,9.5-4,12.3-6.1c2.6,1.6,5.3,3.1,6.7,3.6c0.1,0,0.2,0.1,0.3,0.1
		c0.4,0,0.8-0.3,0.9-0.7c0.2-0.5-0.1-1.1-0.6-1.3c-1.1-0.4-3.4-1.7-5.7-3.1c1.1-1,1.9-1.9,2.5-2.6c2.8,1,5.3,2,6.2,2.5
		c0.2,0.1,0.3,0.1,0.5,0.1c0.3,0,0.7-0.2,0.9-0.5c0.3-0.5,0.1-1.1-0.4-1.4c-1-0.6-3.4-1.5-6-2.4c0.1-0.2,0.3-0.4,0.5-0.6
		c0.6-0.8,1.4-1.9,2.1-3.2c3.2,0.9,5.9,1.9,7,2.8c0.2,0.1,0.4,0.2,0.6,0.2c0.3,0,0.6-0.1,0.8-0.4C73.5,41,73.4,40.4,73,40.1z" />
                </g>
            </svg>

</div>
    </div>
    <div class="turtle">
        <div class="line">
            <svg version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" xmlns:a="https://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="90.7px" height="57.4px" viewBox="0 0 90.7 57.4" enable-background="new 0 0 90.7 57.4"
            xml:space="preserve">
                <defs>
                </defs>
                <g>
                    <path d="M85.9,34c-0.1-2-2-3.3-3-3.8c-0.6-3.6-4.6-16.6-9-22.6C69.5,1.6,61.2-1,51,0.4
		c-8.8,1.2-15.4,13.5-15.7,14.1c-0.3,0.5-0.1,1.1,0.4,1.4c0.5,0.3,1.1,0.1,1.4-0.4c0-0.1,1.3-2.4,3.3-5.1c0,0,0,0,0,0.1
		c1.1,1.1,4.1,4.2,4.7,5.8c0.9,2.2,1.2,5.8,1,6.4c-0.7,1-6.9,5.4-8.3,5.6c-0.6,0-1,0.5-0.9,1.1c0,0.5,0.5,0.9,1,0.9c0,0,0.1,0,0.1,0
		c2.2-0.2,9.2-5.3,9.9-6.5c0.9-1.5-0.1-6.2-0.8-8.2c-0.9-2.3-4.8-6.1-5.2-6.5c-0.1-0.1-0.1-0.1-0.2-0.1c0.9-1,1.8-2,2.9-3
		c0.5,1.8,2.3,8,5.7,8.7c0.7,0.1,1.4,0.3,2.2,0.5c1.5,0.4,3.2,0.9,4.9,0.9c1.3,0,2.6-0.3,3.8-1c3.5-2.2,6.5-9.1,6.8-10.1
		c1.5,0.9,3,2.1,4.2,3.7c-0.2,0.1-0.4,0.2-0.5,0.4c-0.9,1.2-5.3,7.3-5.5,9.6c-0.2,2,0.3,8.8,2.4,10.2l0.5,0.3c1.6,1.1,4,2.8,7.1,2.8
		c1.9,0,3.7-0.9,4.9-1.9c0.1,0.5,0.2,0.8,0.2,1.1c0,0.4,0.3,0.7,0.6,0.8c0.2,0.1,0.4,0.2,0.6,0.3c-2.4,2.2-9,7.1-16.9,9.5l-0.5,0.1
		c-2.4,0.7-6.8,2.1-17.4,0.6c-7.6-1.1-9.8-3.5-9.9-3.5c-0.4-0.4-1-0.5-1.4-0.1c-0.4,0.4-0.5,1-0.1,1.4c0.3,0.3,2.7,3,11.1,4.2
		c3.6,0.5,6.5,0.7,8.9,0.7c4.9,0,7.7-0.8,9.4-1.4l0.5-0.1c8.3-2.5,15.2-7.6,17.8-10c0.1,0.2,0.2,0.4,0.2,0.6c-0.2,1-4.4,4.5-8.1,6.9
		c-1,0.7-0.5,1.9,0.4,4.6c0.7,2.1,1.7,5,1.7,7.1c0,0.8,0,1.4-0.1,1.7c0,0-0.1,0-0.1,0c-0.4-0.1-1-0.2-1.7-0.2
		c-0.9,0-2.6,0.2-4.3,0.5C70,54.9,67,55.3,66,55.1c-0.3-1-0.5-3.5-0.3-4c0.6-0.8,0.9-3.2,1-5.1c0-0.4-0.2-0.7-0.5-0.9s-0.7-0.2-1,0
		c-2.4,1.3-6.4,3.2-7.6,3.1c-2.2-0.1-5.4-0.4-5.8-0.6c-0.3-0.1-0.7-0.1-1,0.2s-0.4,0.6-0.3,1c0,0,0.3,1.6,0.2,2.9
		c-0.1,1.1-0.5,2.7-0.8,3.3c-0.1,0-0.3,0-0.4,0c-10.1,0.8-11.8,0-12.1-0.1c-0.6-1.3,0.2-3.1,0.5-3.7l2.1-4.1
		c0.3-0.5,0.1-1.1-0.4-1.3c-2-1-4.5-2.2-5.2-2.3c-0.5-0.1-1.1,0.3-1.1,0.9c-0.1,0.5,0.3,1,0.9,1.1c0.4,0.1,2,0.9,3.7,1.7l-1.6,3.2
		c-0.1,0.1-1.7,3-0.6,5.5c0.5,1,1.9,1.7,6.5,1.7c1.9,0,4.4-0.1,7.6-0.4c0.4,0,0.6-0.1,0.7-0.1c1.9,0,2.3-5,2.3-5.2
		c0.1-0.7,0-1.4-0.1-2c1.8,0.2,4.3,0.4,4.9,0.4c1.6,0.1,5-1.5,7.1-2.5c-0.1,1.1-0.3,2-0.4,2.2c-1,1.2-0.4,5.4,0.2,6.5
		c0.6,1.1,2.5,1,7.7,0.3c1.6-0.2,3.2-0.4,4-0.4c0.5,0,1,0.1,1.3,0.2c0.6,0.1,1.2,0.2,1.8-0.2c0.7-0.5,0.7-1.5,0.7-3.5
		c0-2.4-1-5.3-1.9-7.7c-0.3-0.9-0.7-2-0.8-2.5C80.7,40.1,86,36.1,85.9,34z M66,4.1c-0.3,1-3.2,7.3-6,9.1c-2,1.3-4.4,0.6-7-0.1
		c-0.8-0.2-1.5-0.4-2.3-0.6c-2-0.4-3.8-5.3-4.3-7.6c0-0.2-0.1-0.3-0.2-0.4c1.6-1.1,3.3-2,5.1-2.2c3.1-0.4,9.4-0.9,14.8,1.5
		C66.1,4,66,4,66,4.1z M75.9,29.8c-2.5,0-4.5-1.4-5.9-2.4L69.5,27c-0.8-0.6-1.8-5.8-1.5-8.3c0.1-1.3,3.1-5.9,5.2-8.7c0,0,0,0,0,0
		c3.1,4.9,5.8,12.9,7.1,17.5C79.8,28.1,78.1,29.8,75.9,29.8z" />
                    <path d="M55.6,40c0.1,0,0.3,0,0.5,0c2.5,0,7.1-1.3,9.8-2.8c3.7-2,0.9-7.4-0.4-10c-0.3-0.6-0.6-1.2-0.8-1.7
		c-1-2.2-2-4.4-3.9-5.7c-0.7-0.5-1.5-0.7-2.4-0.7c-2.2,0-4.7,1.3-7.2,2.8c-3.1,1.8-4.1,6.2-4.4,7.6c0,0.1,0,0.2-0.1,0.3
		c-0.3,0.8,0.2,4.8,0.4,6C47.7,38.3,53.5,39.8,55.6,40z M48.6,30.4c0-0.1,0.1-0.2,0.1-0.5c0.7-3.3,1.9-5.4,3.5-6.3
		c2.2-1.3,4.5-2.6,6.2-2.6c0.5,0,0.9,0.1,1.3,0.4c1.4,1,2.3,2.8,3.2,4.8c0.3,0.6,0.6,1.2,0.9,1.8c1.4,2.7,3,6.4,1.2,7.4
		c-2.6,1.4-7.1,2.7-9.2,2.6c-2.6-0.2-6.4-1.8-6.6-2.6C48.8,33.8,48.6,30.7,48.6,30.4z" />
                </g>
                <g class="head">
                    <path d="M37.5,29.6c0-5.4-0.1-8.8-0.3-10c-0.1-1.1-1.6-9.3-12.9-10.4C15.9,8.4,7,10.6,2.7,14.5
		C0.9,16.1,0,17.9,0,19.8c0,4.9,2.6,12.7,6.7,16.8c1.9,1.8,3.9,2.8,6.1,2.8c0.1,0,0.2,0,0.2,0c0.7,0,1.3-0.1,2-0.2
		c0,0.5,0.4,0.9,0.9,1c1.3,0.2,7.3,0.8,10.1,0.2c1,1.4,3.8,4.4,8.1,5c0,0,0.1,0,0.1,0c0.5,0,0.9-0.4,1-0.9c0.1-0.5-0.3-1-0.9-1.1
		c-4.6-0.6-7.1-4.7-7.1-4.7c-0.3-0.5-0.9-0.6-1.3-0.4c-0.7,0.4-3.9,0.4-7.1,0.1c4.6-1.3,7.9-3.9,8.3-6.2c0.1-0.5-0.3-1.1-0.8-1.2
		c-0.5-0.1-1.1,0.3-1.2,0.8c-0.3,1.7-4.9,5.2-12.2,5.4c-1.7,0-3.3-0.7-4.9-2.2C4.5,31.6,2,24.4,2,19.8c0-1.3,0.7-2.7,2-3.9
		c3.9-3.5,12.3-5.5,20-4.7c10.4,1,11.1,8.4,11.1,8.7c0,0.1,0,0.1,0,0.2c0.2,0.8,0.3,5.8,0.3,9.5c0,4.7,0,7.6,0.2,8.7
		c0.1,0.5,0.6,0.9,1.2,0.8c0.5-0.1,0.9-0.6,0.8-1.2C37.6,37,37.5,33.1,37.5,29.6z" />
                    <path class="eye" d="M25.2,19.6c-0.1,0-0.2,0-0.3,0c-1,0-3.9,0.6-4.5,1c-0.8,0.6-0.9,2.7-0.9,3.3h0c0,0.2,0,1.3,0.6,2
		c0.4,0.4,0.8,0.6,1.4,0.6h0c0.5,0,1.1-0.2,1.8-0.6c2.2-1.3,3.4-3.7,3.1-5.1C26.2,20.2,25.8,19.7,25.2,19.6z M22.2,24.2
		c-0.4,0.2-0.6,0.3-0.7,0.3c0-0.1-0.1-0.3-0.1-0.5c0,0,0-0.1,0-0.1c0-0.3,0.1-1.2,0.2-1.7c0.5-0.2,1.8-0.5,2.7-0.6
		C24.1,22.3,23.5,23.5,22.2,24.2z" />
                </g>
                <g class="tail">
                    <path d="M82.8,40.8c-1,0-1.7,0-1.8-0.1c-0.5-0.1-0.9-0.6-0.8-1.2c0.1-0.5,0.6-0.9,1.2-0.8c0.7,0.1,3.7,0,5.7-0.3
		c-1.8-0.6-3.6-0.9-3.7-0.9c-0.5-0.1-0.9-0.6-0.8-1.1c0.1-0.5,0.6-0.9,1.1-0.8c0.1,0,3.5,0.6,6,1.8c1.2,0.6,0.9,1.5,0.9,1.7
		C90.1,40.6,85.5,40.8,82.8,40.8z" />
                </g>
            </svg>

</div>
        <div class="back">
            <svg version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" xmlns:a="https://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="90.7px" height="57.4px" viewBox="0 0 90.7 57.4" enable-background="new 0 0 90.7 57.4"
            xml:space="preserve">
                <defs>
                </defs>
                <g>
                    <path d="M89.8,37.5c-1.6-0.8-3.5-1.3-4.8-1.6c0.5-0.7,0.9-1.4,0.8-1.9c-0.1-2-2-3.3-3-3.8c-0.6-3.6-4.6-16.6-9-22.6
		C69.5,1.6,61.2-1,51,0.4c-8.8,1.2-15.4,13.5-15.7,14.1c-0.1,0.1-0.1,0.3-0.1,0.4c-1.7-2.5-5-5-11-5.6C15.9,8.4,7,10.6,2.7,14.5
		C0.9,16.1,0,17.9,0,19.8c0,4.9,2.6,12.7,6.7,16.8c1.9,1.8,3.9,2.8,6.1,2.8c0.1,0,0.2,0,0.2,0c0.7,0,1.3-0.1,2-0.2
		c0,0.5,0.4,0.9,0.9,1c1.3,0.2,7.3,0.8,10.1,0.2c1,1.4,3.8,4.4,8.1,5c0.4,0.1,2,0.9,3.7,1.7l-1.6,3.2c-0.1,0.1-1.7,3-0.6,5.5
		c0.5,1,1.9,1.7,6.5,1.7c1.9,0,4.4-0.1,7.6-0.4c0.4,0,0.6-0.1,0.7-0.1c1.9,0,2.3-5,2.3-5.2c0.1-0.7,0-1.4-0.1-2
		c1.8,0.2,4.3,0.4,4.9,0.4c1.6,0.1,5-1.5,7.1-2.5c-0.1,1.1-0.3,2-0.4,2.2c-1,1.2-0.4,5.4,0.2,6.5c0.6,1.1,2.5,1,7.7,0.3
		c1.6-0.2,3.2-0.4,4-0.4c0.5,0,1,0.1,1.3,0.2c0.6,0.1,1.2,0.2,1.8-0.2c0.7-0.5,0.7-1.5,0.7-3.5c0-2.4-1-5.3-1.9-7.7
		c-0.3-0.9-0.7-2-0.8-2.5c0.9-0.6,2-1.4,3.1-2.2c0.1,0.3,0.4,0.5,0.7,0.6c0.1,0,0.8,0.1,1.8,0.1c2.7,0,7.3-0.3,7.8-1.7
		C90.7,38.9,91,38,89.8,37.5z" />
                </g>
            </svg>

</div>
    </div>
    <div class="mouse">
        <div class="line">
            <svg version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" xmlns:a="https://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="72.1px" height="45.9px" viewBox="0 0 72.1 45.9" enable-background="new 0 0 72.1 45.9"
            xml:space="preserve">
                <defs>
                </defs>
                <g class="ear">
                    <path d="M26.9,17.7c-0.3,0-0.6-0.2-0.8-0.4c-0.3-0.5-0.2-1.1,0.3-1.4c2.9-2,4.6-7,4.1-9.9c-0.4-2.4-4-4.2-8.1-4
		c-3.1,0.1-6.9,6-8.1,8.3c-0.3,0.5-0.9,0.7-1.4,0.4c-0.5-0.3-0.7-0.9-0.4-1.4c0.5-0.9,5-9.1,9.8-9.4c5.2-0.2,9.6,2.2,10.2,5.6
		c0.6,3.6-1.3,9.3-5,11.9C27.2,17.7,27,17.7,26.9,17.7z" />
                </g>
                <g class="tails">
                    <path d="M33,45.9c-0.5,0-0.9-0.3-1-0.8c0-0.1-0.5-2.6,1-4.6c1-1.4,2.8-2.2,5.1-2.4c2.1-0.2,4.7-0.1,7.5-0.1
		c5.9,0.1,12.5,0.2,15.9-1.5c3-1.5,6.9-4,8.1-8c0.8-2.6,0.4-5.6-1.4-8.8c-3.1-5.7-14.3-4.7-14.4-4.7c-0.5,0.1-1-0.3-1.1-0.9
		c-0.1-0.5,0.3-1,0.9-1.1c0.5,0,12.6-1.2,16.3,5.7c2,3.7,2.6,7.2,1.5,10.4c-1.5,4.6-5.8,7.5-9.1,9.2c-3.9,1.9-10.8,1.8-16.8,1.7
		c-2.8,0-5.4-0.1-7.3,0.1c-1.7,0.1-3,0.7-3.7,1.6c-1,1.3-0.6,3-0.6,3c0.1,0.5-0.2,1.1-0.8,1.2C33.1,45.9,33.1,45.9,33,45.9z" />
                </g>
                <g>
                    <path d="M53.7,8.5c-1.4-2.9-4-5-7.7-6.3c-4.8-1.6-9.6-1.8-16.7-0.4c-0.5,0.1-0.9,0.6-0.8,1.2
		c0.1,0.5,0.6,0.9,1.2,0.8c6.7-1.3,11.2-1.2,15.7,0.3c3.2,1.1,5.4,2.9,6.6,5.2c1.3,2.6,1.2,6.1-0.1,9.7c-2.5,7.1-10.6,11.7-17,12.1
		C22,31.9,12.3,29.3,7.7,27.7c-1.9-0.7-3.2-1.7-4-2.8c0.9,0.2,2,0.3,3.1,0.3c1,0,2-0.1,2.8-0.4c0.5-0.2,0.8-0.8,0.6-1.3
		C10,23.1,9.4,22.8,8.9,23c-2.3,0.8-5.8-0.2-6.5-0.4C2,21.6,2,20.9,2,20.8c0-1.3,2.5-7.5,10.2-11.6c0.5-0.3,0.8-0.5,1.1-0.6
		c0.7-0.4,1-0.6,2.6-1.1c0.5-0.2,0.8-0.7,0.6-1.3s-0.7-0.8-1.3-0.6C14.5,5.8,14,6,13.6,6.2c-0.3-1.5-1.2-2.8-2.4-3.4
		c-1.5-0.7-3.3-0.4-4.9,1c-3.4,2.8-2.5,8.4-2.5,8.6c0,0.2,0.2,0.4,0.3,0.6c-3,3.4-4.1,6.6-4.1,7.9c0,0.1,0.2,6.5,7.1,8.8
		c4.2,1.4,12.6,3.7,23.5,3.7c1.4,0,2.8,0,4.3-0.1c7-0.4,16-5.5,18.8-13.4C54.7,16.8,55.6,12.5,53.7,8.5z M7.5,5.3
		c1-0.8,2-1.1,2.8-0.7C11.2,5,11.7,6,11.7,7.1c0,0,0,0,0,0.1c-0.1,0.1-0.3,0.1-0.4,0.2C9,8.6,7.2,10,5.7,11.4
		C5.6,10,5.6,6.9,7.5,5.3z" />
                    <path class="eye" d="M7.4,17.6c0,0,0.2,1.4,0.8,1.4c0.6,0,3-0.4,2.5-1.4C10.2,16.6,8.4,15.9,7.4,17.6z" />
                </g>
            </svg>

</div>
    </div>
</div>

小鸡、鱼缸里的鱼、小狗、小猫、乌龟和小老鼠。鼠标悬停呈现动效。

SVG,卡通，动物

编辑器支持Emmet

快捷键

小鸡、鱼缸里的鱼、小狗、小猫、乌龟和小老鼠。鼠标悬停呈现动效。

SVG,卡通，动物

使用SVG过滤器和CSS3动画实现的文本特效 弯弯曲曲的蚯蚓字

使用ReactJS的SVG过滤器组件实现的弯曲卡通人物肖像

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

使用SVG过滤器和CSS3动画实现的文本特效弯弯曲曲的蚯蚓字