SVG诡异动画: 柔性化学瓶子中的眼睛

magic eye in googly bottle，瓶子有点像植物大战僵尸里面的大白菜一样轻微的上下抖动。

svg, eye, bottle

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    overflow: hidden;
}
.container {
    /*   background-color: red; */
    
    height: 200px;
    left: 50%;
    position: fixed;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
}
.bottle {
    animation: bouncebody alternate infinite 400ms 40ms ease-in-out;
    transform-origin: center bottom;
}
@keyframes bouncebody {
    to {
        transform: scaleX(1.03) scaleY(0.97);
    }
}
#eye-container {
    animation: bounceeye infinite 0.8s ease-in-out;
    height: 40px;
    left: 40px;
    position: absolute;
    top: 130px;
    width: 40px;
}
@keyframes bounceeye {
    50% {
        top: 125px;
    }
}
.eye {
    background-color: #fff;
    border-radius: 50%;
    height: 40px;
    margin: auto;
    position: relative;
    width: 40px;
}
.eye:after {
    content: "";
    background-color: #000;
    border-radius: 50%;
    height: 20px;
    left: calc(50% - 10px);
    position: absolute;
    width: 20px;
}
.pupil {
    background-color: #fff;
    border-radius: 50%;
    height: 10px;
    left: 8px;
    position: absolute;
    top: 12px;
    width: 10px;
    z-index: 99;
}
#link {
    bottom: 20px;
    color: #2D80D0;
    opacity: 0.6;
    display: flex;
    align-items: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
#link p {
    font-size: 20px;
    margin: 0;
    margin-left: 5px;
}
#link:hover {
    opacity: 1;
}

HTML

<div class="container">
    <div class="bottle">
        <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="120px" height="200px" viewBox="0 0 120 200" style="enable-background:new 0 0 120 200;"
        xml:space="preserve">
            <style type="text/css">
                .st0 {
                    fill: #A5A5A5;
                }
                .st1 {
                    fill: #C1D3C9;
                }
                .st2 {
                    opacity: 0.1;
                }
                .st3 {
                    fill: #FFFFFF;
                }
                .st4 {
                    fill: #86533E;
                }
                .st5 {
                    opacity: 0.5;
                    fill: #663300;
                }
                .st6 {
                    fill: #89A395;
                }
                .st7 {
                    fill: #1459A5;
                }
                .st8 {
                    fill: #1A63BF;
                }
                .st9 {
                    fill: #2D80D0;
                }
                .st10 {
                    opacity: 0.3;
                }
            </style>
            <defs>
            </defs>
            <g>
                <ellipse class="st0" cx="49.1" cy="190.9" rx="49.1" ry="9.1" />
                <g>
                    <g>
                        <path class="st1" d="M78.4,64.1V33H44v31c0,10.7-5.4,20.4-14.1,25.8c-16.5,10.3-27.5,28.5-27.5,49.3c0,32.2,26.3,54.7,58.8,54.7
            c32.5,0,58.8-22.6,58.8-54.7c0-20.8-11-39-27.5-49.3C83.9,84.5,78.4,74.8,78.4,64.1z" />
                        <rect x="44" y="33" class="st2" width="34.4" height="8.5" />
                        <path class="st3" d="M81.9,39.3H40.6c-3,0-5.4-2.4-5.4-5.4v-7.3c0-3,2.4-5.4,5.4-5.4h41.3c3,0,5.4,2.4,5.4,5.4v7.3
            C87.3,36.9,84.9,39.3,81.9,39.3z" />
                        <path class="st1" d="M81.9,39.3H40.6c-3,0-5.4-2.4-5.4-5.4v-7.3c0-3,2.4-5.4,5.4-5.4h41.3c3,0,5.4,2.4,5.4,5.4v7.3
            C87.3,36.9,84.9,39.3,81.9,39.3z" />
                        <g>
                            <polygon class="st4" points="79.7,0 42.7,0 45.6,21.2 76.8,21.2 				" />
                        </g>
                        <path class="st5" d="M46.3,15.9L44.1,0h-1.4l2.9,21.2h31.2l0.2-1.3H50.6C48.5,19.9,46.6,18.2,46.3,15.9z" />
                    </g>
                    <g>
                        <path class="st6" d="M40.1,94.9c0,0,0.1,0,0.1,0c2.4,0.1,4.8-0.8,6.7-2.4c4.2-3.7,4.1-9.5,2.9-14.7c-0.2-0.9-0.7-3.4-1.5-3.9
            c-2.2-1.2-4.3,5.3-5,6.6c-1.1,2.3-1.8,4.4-3.7,6.1c-1.8,1.6-3.8,2.6-5.8,3.8c-0.3,0.2-0.6,0.4-0.8,0.7c-0.3,0.6,0.2,1.4,0.7,1.8
            c0.9,0.8,2,0.9,3,1.2C37.9,94.5,38.9,94.9,40.1,94.9z" />
                        <path class="st6" d="M30.3,93.7c-1,0.6-1.9,1.3-2.8,2c-1,0.8-2,1.7-2.7,2.9c-0.7,1.2-1.1,2.6-0.7,3.9c3.2,0.8,6.7,0.2,9.6-1.4
            c0.8-0.4,1.6-1,2-1.8c0.5-0.8,0.6-1.9,0-2.7c-0.3-0.4-0.7-0.7-1.1-0.9c-0.9-0.6-1.8-1.1-2.8-1.7C31,93.5,31.1,93.2,30.3,93.7z" />
                        <path class="st6" d="M44,96.8c-0.6-0.3-1.5-0.5-2.1-0.6c-2.1-0.3-4.1,1-3.4,3.5c0.3,0.9,1,1.7,1.8,2.2c0.9,0.5,2.6,0.6,3.5,0
            c0.2-0.1,0.3-0.2,0.5-0.4c0.2-0.2,0.5-0.4,0.6-0.7c0.1-0.2,0.1-0.5,0.1-0.7c0-0.9,0.1-2.2-0.5-2.9C44.4,97.1,44.2,96.9,44,96.8z" />
                    </g>
                </g>
                <g>
                    <g>
                        <path class="st7" d="M105.2,110.9c-2.1,0.3-4.5,0.6-7.3,0.8c5,7.5,7.9,16.4,7.9,26c0,25.9-21.3,47-48.3,48.9
            c1.3,0.1,2.6,0.2,3.9,0.2c28.8,0,52.2-22,52.2-49C113.7,127.8,110.6,118.6,105.2,110.9z" />
                        <path class="st8" d="M97.9,111.7c-9.4,0.8-22.4,1.4-36.8,1.4c-1.3,0-2.6,0-3.9,0c-16.5-0.1-30.9-0.9-39.5-2.1
            c-0.2,0.3-0.3,0.5-0.5,0.8c-5,7.5-7.9,16.4-7.9,25.9c0,25.9,21.3,47,48.3,48.9c27-1.9,48.3-23,48.3-48.9
            C105.9,128.1,103,119.2,97.9,111.7z" />
                    </g>
                    <polygon class="st9" points="105.2,110.9 105.2,110.9 105.2,110.9 		" />
                    <path class="st9" d="M105.2,110.9c-9.2-1.3-25.5-2.2-44-2.2c-18.1,0-34,0.8-43.3,2.1c0,0.1-0.1,0.1-0.1,0.2
          c9.3,1.3,25.3,2.1,43.4,2.1C79.7,113.1,96,112.2,105.2,110.9C105.2,110.9,105.2,110.9,105.2,110.9z" />
                </g>
                <g class="st10">
                    <path class="st3" d="M16.8,121.9c0.7-1.9,1.3-3.8,2.6-5.2c0.4-0.5,0.9-0.9,1.5-0.9c1-0.1,1.6,0.9,2.1,1.7c1.1,1.8,2.3,3.5,3.6,5.1
          c0.7,0.8,1.3,1.6,2,2.4c0.6,0.7,0.7,1.3,0.8,2.2c0,0.3,0.1,0.7,0.1,1c-0.1,0.3-0.1,0.7-0.2,1.1c-0.1,0.6-0.4,1.6-1.1,1.7
          c-0.5,0.1-1.5-0.5-2-0.7c-1.4-0.5-3.6-0.9-4.7-2c-1.8-1-3.4-2.4-4.5-4.2c-0.2-0.4-0.4-0.8-0.4-1.2
          C16.6,122.4,16.7,122.1,16.8,121.9z" />
                    <path class="st3" d="M18.4,127.9c0.4,0.6,0.7,1.2,1.2,1.7c0.9,1,1.5,2.4,1.2,3.8c-0.4,1.7-1.8,2.8-3.3,3.6
          c-0.4,0.2-0.7,0.3-1.1,0.4c-0.9,0.1-1.8-0.7-2.1-1.6c-0.7-2.1,0.3-5.2,0.8-7.3c0.3-1.2,0.8-3.4,2.2-2.1
          C17.8,126.8,18.1,127.3,18.4,127.9z" />
                    <path class="st3" d="M24,130.7c-1-0.2-2.1-0.3-2.1,0.3c0,0.9,0.6,1.7,1,2.5c0.1,0.4,0.2,0.7,0.4,1.1c0.4,0.6,1.2,0.9,1.8,0.6
          c1.2-0.5,2.6-2.8,1-3.8C25.9,131.3,24.9,130.9,24,130.7z" />
                </g>
            </g>
        </svg>
    </div>

</div>

magic eye in googly bottle，瓶子有点像植物大战僵尸里面的大白菜一样轻微的上下抖动。

svg, eye, bottle

编辑器支持Emmet

快捷键

magic eye in googly bottle，瓶子有点像植物大战僵尸里面的大白菜一样轻微的上下抖动。

svg, eye, bottle

SVG 沙漠中行驶的军车动画场景

SVG CSS3恐怖而惊艳的脸皮融化（面膜剥落）动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：