SVG眨眼动画 - 踏得网

Blinking Eyes，可以用鼠标控制眼睛的朝向。

svg, eye, blink

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var windowH,
    windowW,
    containerW,
    containerH,
    mouseX,
    mouseY,
    irisColors = ['red', 'green', 'blue', 'yellow'],
    section = document.querySelector('section'),
    container = document.querySelector('.container'),
    eyeEls = document.querySelectorAll('.eye-element-container'),
    eyeSVGs = document.querySelectorAll('.eye-svg'),
    irisEls = document.querySelectorAll('.eye-moving-elements'),
    debugPanel = document.querySelector('.debug-panel'),
    generateColors = document.querySelector('.generate-new-colors'),
    eyeW,
    eyeH,
    zDist,
    xMove,
    yMove;

var debugMe = function() {
    var eyeOffsetX = eyeEls[4].offsetLeft + eyeW;
    var eyeOffsetY = eyeEls[4].offsetTop + eyeH;
    var eyePosX = ((containerW / 2) - eyeOffsetX);
    var eyePosY = ((containerH / 2) - eyeOffsetY);
    debugPanel.innerHTML =
        'windowW: ' + windowW + '<br/>' +
        'windowH: ' + windowH + '<br/>' +
        'containerW: ' + containerW + '<br/>' +
        'containerH: ' + containerH + '<br/>' +
        'eyeW: ' + eyeW + '<br/>' +
        'eyeH: ' + eyeH + '<br/>' +
        'zDist: ' + zDist + '<br/>' +
        'eyeOffsetX: ' + eyeOffsetX + '<br/>' +
        'eyePosX: ' + eyePosX + '<br/>' +
        'eyeOffsetY: ' + eyeOffsetY + '<br/>' +
        'eyePosY: ' + eyePosY + '<br/>' +
        'mouseY: ' + mouseY + '<br/>' +
        'translateY: ' + (Math.atan((mouseY - eyePosY) / zDist)) + '<br/>' +
        "yMove: " + yMove;
}

var getSizes = function() {
    windowW = window.innerWidth;
    windowH = window.innerHeight;
    containerW = container.offsetWidth;
    containerH = container.offsetHeight;
    eyeW = eyeEls[0].offsetWidth / 2;
    eyeH = eyeEls[0].offsetHeight / 2;
    zDist = eyeW * 1.75;
}

//Mouse Move Actions
window.addEventListener('mousemove', function(e) {
    mouseX = e.clientX - windowW / 2;
    mouseY = e.clientY - windowH / 2;
    requestAnimationFrame(function() {
        handleIrisMove(true);
    });
}, false);

window.addEventListener('mouseout', function(e) {
    requestAnimationFrame(function() {
        handleIrisMove(false);
    });
}, false);

//Touch Move Actions
section.addEventListener('touchmove', function(e) {
    e.preventDefault();
    mouseX = e.touches[0].pageX - windowW / 2;
    mouseY = e.touches[0].pageY - windowH / 2;
    requestAnimationFrame(function() {
        handleIrisMove(true);
    });
}, false);

section.addEventListener('touchend', function(e) {
    e.preventDefault();
    requestAnimationFrame(function() {
        handleIrisMove(false);
    });
}, false);

// Auto Blink Actions
var randRange = function(min, max) {
    return Math.random() * (max - min) + min;
}

var blinkAction = function(el) {
    el.classList.add('blink');
    el.addEventListener("webkitAnimationEnd", function() {
        el.classList.remove('blink');
    }, false);
    autoBlink(el);
}

var autoBlink = function() {
    setTimeout(function() {
        blinkAction(eyeSVGs[Math.floor(randRange(0, eyeSVGs.length))]);
    }, randRange(500, 4000));
}

generateColors.addEventListener('click', function() {
    irisEls.forEach(function(i) {
        var newColor = irisColors[Math.floor(Math.random() * irisColors.length)];
        i.querySelector('.iris').classList = 'iris ' + newColor;
    });
    console.log('test');
}, false);

eyeSVGs.forEach(function(i) {
    i.addEventListener('click', changeEyeColor);
    i.addEventListener('touchstart', changeEyeColor);
});

//Window actions
window.addEventListener('resize', getSizes);

//Init Actions
getSizes();
autoBlink();

编译

CSS

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    box-sizing: border-box;
}
html,
body {
    background: #001c34;
    font-size: 10px;
}
#svg-defs {
    display: none;
}
section {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container {
    width: 70vw;
    position: relative;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
[class*="row"] {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.eye-element-container {
    cursor: pointer;
    width: 25.3333333333%;
    margin: -1% 4%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.eye-element-container:hover .pupil {
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
}
svg.eye-svg {
    width: 100%;
}
svg.eye-svg [id*="eye-clip-path"] path {
    transition: -webkit-transform 0.1s ease-in-out;
    transition: transform 0.1s ease-in-out;
    transition: transform 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out;
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
svg.eye-svg.blink [id*="eye-clip-path"] path {
    -webkit-animation: blink 0.225s ease-in-out;
    animation: blink 0.225s ease-in-out;
}
svg.eye-svg * {
    pointer-events: none;
}
svg.eye-svg:active #eye-clip-path-1 path {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
}
svg.eye-svg:active #eye-clip-path-2 path {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
}
svg.eye-svg:active #eye-clip-path-3 path {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
}
svg.eye-svg:active #eye-clip-path-4 path {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
}
svg.eye-svg:active #eye-clip-path-5 path {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
}
svg.eye-svg:active #eye-clip-path-6 path {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
}
svg.eye-svg:active #eye-clip-path-7 path {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
}
svg.eye-svg:active #eye-clip-path-8 path {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
}
svg.eye-svg:active #eye-clip-path-9 path {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
}
svg.eye-svg:active #eye-clip-path-10 path {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
}
svg.eye-svg:active #eye-clip-path-11 path {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
}
svg.eye-svg:active #eye-clip-path-12 path {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
}
svg.eye-svg:active #eye-clip-path-13 path {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
}
svg.eye-svg:active #eye-clip-path-14 path {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
}
svg.eye-svg:active #eye-clip-path-15 path {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
}
.eye-moving-elements {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.eye-moving-elements,
.pupil-group,
.highlight {
    transition: -webkit-transform .05s ease-out;
    transition: transform .05s ease-out;
    transition: transform .05s ease-out, -webkit-transform .05s ease-out;
}
.white-eye-background,
.highlight {
    fill: #EFEAE4;
}
.iris {
    fill: #eb3e25;
    transition: fill .1s ease-in-out;
}
.iris.red {
    fill: #eb3e25;
}
.iris.blue {
    fill: #007ec3;
}
.iris.green {
    fill: #01a673;
}
.iris.yellow {
    fill: #fdc80a;
}
.pupil {
    fill: #001c34;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    transition: -webkit-transform .25s ease-in-out;
    transition: transform .25s ease-in-out;
    transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out;
    pointer-events: none;
}
@-webkit-keyframes blink {
    0% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    50% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}
@keyframes blink {
    0% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    50% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
    }
    100% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}
.debug-panel {
    position: fixed;
    top: 0;
    left: 0;
    font-family: 'Helvetica', 'Arial', san-serif;
    color: white;
    padding: 10px;
}
button {
    display: inline-block;
    border: none;
    padding: 1rem 1.5rem;
    margin: 0;
    text-decoration: none;
    background: #002a4e;
    color: #ffffff;
    font-family: 'Helvetica', 'Arial', sans-serif;
    font-weight: bold;
    font-size: 1.4rem;
    cursor: pointer;
    text-align: center;
    transition: background 250ms ease-in-out, -webkit-transform 150ms ease;
    transition: background 250ms ease-in-out, transform 150ms ease;
    transition: background 250ms ease-in-out, transform 150ms ease, -webkit-transform 150ms ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: fixed;
    bottom: 10px;
    left: 10px;
}
button:hover {
    background: #0053ba;
}
button:focus {
    outline: none;
}
button:active {
    -webkit-transform: scale(0.99);
    transform: scale(0.99);
}

HTML

<section>
    <div class="container">
        <div class="odd row-1">
            <div class="eye-element-container">
                <svg class="eye-svg" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" viewBox="0 0 400 252.8" xml:space="preserve">
                    <clipPath id="eye-clip-path-1">
                        <path id="eye-open-shape" d="M300 37c-55.2-49.3-144.8-49.3-200 0L0 126.4l100 89.4c55.2 49.3 144.8 49.3 200 0l100-89.4L300 37z" />
                    </clipPath>
                    <g class="eye-element" clip-path="url(#eye-clip-path-1)" -webkit-clip-path="url(#eye-clip-path-1)">
                        <circle class="white-eye-background" cx="200" cy="126.4" r="223.1" />
                        <g class="eye-moving-elements">
                            <circle class="iris red" cx="200" cy="126.4" r="95.2" />
                            <g class="pupil-group">
                                <circle class="pupil" cx="200" cy="126.4" r="52.4" />
                            </g>
                            <circle class="highlight" cx="166.3" cy="92.7" r="23.3" />
                        </g>
                    </g>
                </svg>
            </div>
            <div class="eye-element-container">
                <svg class="eye-svg" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" viewBox="0 0 400 252.8" xml:space="preserve">
                    <clipPath id="eye-clip-path-2">
                        <path id="eye-open-shape" d="M300 37c-55.2-49.3-144.8-49.3-200 0L0 126.4l100 89.4c55.2 49.3 144.8 49.3 200 0l100-89.4L300 37z" />
                    </clipPath>
                    <g class="eye-element" clip-path="url(#eye-clip-path-2)" -webkit-clip-path="url(#eye-clip-path-2)">
                        <circle class="white-eye-background" cx="200" cy="126.4" r="223.1" />
                        <g class="eye-moving-elements">
                            <circle class="iris yellow" cx="200" cy="126.4" r="95.2" />
                            <g class="pupil-group">
                                <circle class="pupil" cx="200" cy="126.4" r="52.4" />
                            </g>
                            <circle class="highlight" cx="166.3" cy="92.7" r="23.3" />
                        </g>
                    </g>
                </svg>
            </div>
            <div class="eye-element-container">
                <svg class="eye-svg" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" viewBox="0 0 400 252.8" xml:space="preserve">
                    <clipPath id="eye-clip-path-3">
                        <path id="eye-open-shape" d="M300 37c-55.2-49.3-144.8-49.3-200 0L0 126.4l100 89.4c55.2 49.3 144.8 49.3 200 0l100-89.4L300 37z" />
                    </clipPath>
                    <g class="eye-element" clip-path="url(#eye-clip-path-3)" -webkit-clip-path="url(#eye-clip-path-3)">
                        <circle class="white-eye-background" cx="200" cy="126.4" r="223.1" />
                        <g class="eye-moving-elements">
                            <circle class="iris green" cx="200" cy="126.4" r="95.2" />
                            <g class="pupil-group">
                                <circle class="pupil" cx="200" cy="126.4" r="52.4" />
                            </g>
                            <circle class="highlight" cx="166.3" cy="92.7" r="23.3" />
                        </g>
                    </g>
                </svg>
            </div>
        </div>
        <div class="even row-2">
            <div class="eye-element-container">
                <svg class="eye-svg" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" viewBox="0 0 400 252.8" xml:space="preserve">
                    <clipPath id="eye-clip-path-4">
                        <path id="eye-open-shape" d="M300 37c-55.2-49.3-144.8-49.3-200 0L0 126.4l100 89.4c55.2 49.3 144.8 49.3 200 0l100-89.4L300 37z" />
                    </clipPath>
                    <g class="eye-element" clip-path="url(#eye-clip-path-4)" -webkit-clip-path="url(#eye-clip-path-4)">
                        <circle class="white-eye-background" cx="200" cy="126.4" r="223.1" />
                        <g class="eye-moving-elements">
                            <circle class="iris green" cx="200" cy="126.4" r="95.2" />
                            <g class="pupil-group">
                                <circle class="pupil" cx="200" cy="126.4" r="52.4" />
                            </g>
                            <circle class="highlight" cx="166.3" cy="92.7" r="23.3" />
                        </g>
                    </g>
                </svg>
            </div>
            <div class="eye-element-container">
                <svg class="eye-svg" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" viewBox="0 0 400 252.8" xml:space="preserve">
                    <clipPath id="eye-clip-path-5">
                        <path id="eye-open-shape" d="M300 37c-55.2-49.3-144.8-49.3-200 0L0 126.4l100 89.4c55.2 49.3 144.8 49.3 200 0l100-89.4L300 37z" />
                    </clipPath>
                    <g class="eye-element" clip-path="url(#eye-clip-path-5)" -webkit-clip-path="url(#eye-clip-path-5)">
                        <circle class="white-eye-background" cx="200" cy="126.4" r="223.1" />
                        <g class="eye-moving-elements">
                            <circle class="iris yellow" cx="200" cy="126.4" r="95.2" />
                            <g class="pupil-group">
                                <circle class="pupil" cx="200" cy="126.4" r="52.4" />
                            </g>
                            <circle class="highlight" cx="166.3" cy="92.7" r="23.3" />
                        </g>
                    </g>
                </svg>
            </div>
        </div>
        <div class="odd row-3">
            <div class="eye-element-container">
                <svg class="eye-svg" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" viewBox="0 0 400 252.8" xml:space="preserve">
                    <clipPath id="eye-clip-path-6">
                        <path id="eye-open-shape" d="M300 37c-55.2-49.3-144.8-49.3-200 0L0 126.4l100 89.4c55.2 49.3 144.8 49.3 200 0l100-89.4L300 37z" />
                    </clipPath>
                    <g class="eye-element" clip-path="url(#eye-clip-path-6)" -webkit-clip-path="url(#eye-clip-path-6)">
                        <circle class="white-eye-background" cx="200" cy="126.4" r="223.1" />
                        <g class="eye-moving-elements">
                            <circle class="iris green" cx="200" cy="126.4" r="95.2" />
                            <g class="pupil-group">
                                <circle class="pupil" cx="200" cy="126.4" r="52.4" />
                            </g>
                            <circle class="highlight" cx="166.3" cy="92.7" r="23.3" />
                        </g>
                    </g>
                </svg>
            </div>
            <div class="eye-element-container">
                <svg class="eye-svg" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" viewBox="0 0 400 252.8" xml:space="preserve">
                    <clipPath id="eye-clip-path-7">
                        <path id="eye-open-shape" d="M300 37c-55.2-49.3-144.8-49.3-200 0L0 126.4l100 89.4c55.2 49.3 144.8 49.3 200 0l100-89.4L300 37z" />
                    </clipPath>
                    <g class="eye-element" clip-path="url(#eye-clip-path-7)" -webkit-clip-path="url(#eye-clip-path-7)">
                        <circle class="white-eye-background" cx="200" cy="126.4" r="223.1" />
                        <g class="eye-moving-elements">
                            <circle class="iris blue" cx="200" cy="126.4" r="95.2" />
                            <g class="pupil-group">
                                <circle class="pupil" cx="200" cy="126.4" r="52.4" />
                            </g>
                            <circle class="highlight" cx="166.3" cy="92.7" r="23.3" />
                        </g>
                    </g>
                </svg>
            </div>
            <div class="eye-element-container">
                <svg class="eye-svg" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" viewBox="0 0 400 252.8" xml:space="preserve">
                    <clipPath id="eye-clip-path-8">
                        <path id="eye-open-shape" d="M300 37c-55.2-49.3-144.8-49.3-200 0L0 126.4l100 89.4c55.2 49.3 144.8 49.3 200 0l100-89.4L300 37z" />
                    </clipPath>
                    <g class="eye-element" clip-path="url(#eye-clip-path-8)" -webkit-clip-path="url(#eye-clip-path-8)">
                        <circle class="white-eye-background" cx="200" cy="126.4" r="223.1" />
                        <g class="eye-moving-elements">
                            <circle class="iris green" cx="200" cy="126.4" r="95.2" />
                            <g class="pupil-group">
                                <circle class="pupil" cx="200" cy="126.4" r="52.4" />
                            </g>
                            <circle class="highlight" cx="166.3" cy="92.7" r="23.3" />
                        </g>
                    </g>
                </svg>
            </div>
        </div>
        <div class="even row-4">
            <div class="eye-element-container">
                <svg class="eye-svg" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" viewBox="0 0 400 252.8" xml:space="preserve">
                    <clipPath id="eye-clip-path-9">
                        <path id="eye-open-shape" d="M300 37c-55.2-49.3-144.8-49.3-200 0L0 126.4l100 89.4c55.2 49.3 144.8 49.3 200 0l100-89.4L300 37z" />
                    </clipPath>
                    <g class="eye-element" clip-path="url(#eye-clip-path-9)" -webkit-clip-path="url(#eye-clip-path-9)">
                        <circle class="white-eye-background" cx="200" cy="126.4" r="223.1" />
                        <g class="eye-moving-elements">
                            <circle class="iris blue" cx="200" cy="126.4" r="95.2" />
                            <g class="pupil-group">
                                <circle class="pupil" cx="200" cy="126.4" r="52.4" />
                            </g>
                            <circle class="highlight" cx="166.3" cy="92.7" r="23.3" />
                        </g>
                    </g>
                </svg>
            </div>
            <div class="eye-element-container">
                <svg class="eye-svg" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" viewBox="0 0 400 252.8" xml:space="preserve">
                    <clipPath id="eye-clip-path-10">
                        <path id="eye-open-shape" d="M300 37c-55.2-49.3-144.8-49.3-200 0L0 126.4l100 89.4c55.2 49.3 144.8 49.3 200 0l100-89.4L300 37z" />
                    </clipPath>
                    <g class="eye-element" clip-path="url(#eye-clip-path-10)" -webkit-clip-path="url(#eye-clip-path-10)">
                        <circle class="white-eye-background" cx="200" cy="126.4" r="223.1" />
                        <g class="eye-moving-elements">
                            <circle class="iris red" cx="200" cy="126.4" r="95.2" />
                            <g class="pupil-group">
                                <circle class="pupil" cx="200" cy="126.4" r="52.4" />
                            </g>
                            <circle class="highlight" cx="166.3" cy="92.7" r="23.3" />
                        </g>
                    </g>
                </svg>
            </div>
        </div>
        <div class="odd row-5">
            <div class="eye-element-container">
                <svg class="eye-svg" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" viewBox="0 0 400 252.8" xml:space="preserve">
                    <clipPath id="eye-clip-path-11">
                        <path id="eye-open-shape" d="M300 37c-55.2-49.3-144.8-49.3-200 0L0 126.4l100 89.4c55.2 49.3 144.8 49.3 200 0l100-89.4L300 37z" />
                    </clipPath>
                    <g class="eye-element" clip-path="url(#eye-clip-path-11)" -webkit-clip-path="url(#eye-clip-path-11)">
                        <circle class="white-eye-background" cx="200" cy="126.4" r="223.1" />
                        <g class="eye-moving-elements">
                            <circle class="iris green" cx="200" cy="126.4" r="95.2" />
                            <g class="pupil-group">
                                <circle class="pupil" cx="200" cy="126.4" r="52.4" />
                            </g>
                            <circle class="highlight" cx="166.3" cy="92.7" r="23.3" />
                        </g>
                    </g>
                </svg>
            </div>
            <div class="eye-element-container">
                <svg class="eye-svg" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" viewBox="0 0 400 252.8" xml:space="preserve">
                    <clipPath id="eye-clip-path-12">
                        <path id="eye-open-shape" d="M300 37c-55.2-49.3-144.8-49.3-200 0L0 126.4l100 89.4c55.2 49.3 144.8 49.3 200 0l100-89.4L300 37z" />
                    </clipPath>
                    <g class="eye-element" clip-path="url(#eye-clip-path-12)" -webkit-clip-path="url(#eye-clip-path-12)">
                        <circle class="white-eye-background" cx="200" cy="126.4" r="223.1" />
                        <g class="eye-moving-elements">
                            <circle class="iris green" cx="200" cy="126.4" r="95.2" />
                            <g class="pupil-group">
                                <circle class="pupil" cx="200" cy="126.4" r="52.4" />
                            </g>
                            <circle class="highlight" cx="166.3" cy="92.7" r="23.3" />
                        </g>
                    </g>
                </svg>
            </div>
            <div class="eye-element-container">
                <svg class="eye-svg" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" viewBox="0 0 400 252.8" xml:space="preserve">
                    <clipPath id="eye-clip-path-13">
                        <path id="eye-open-shape" d="M300 37c-55.2-49.3-144.8-49.3-200 0L0 126.4l100 89.4c55.2 49.3 144.8 49.3 200 0l100-89.4L300 37z" />
                    </clipPath>
                    <g class="eye-element" clip-path="url(#eye-clip-path-13)" -webkit-clip-path="url(#eye-clip-path-13)">
                        <circle class="white-eye-background" cx="200" cy="126.4" r="223.1" />
                        <g class="eye-moving-elements">
                            <circle class="iris red" cx="200" cy="126.4" r="95.2" />
                            <g class="pupil-group">
                                <circle class="pupil" cx="200" cy="126.4" r="52.4" />
                            </g>
                            <circle class="highlight" cx="166.3" cy="92.7" r="23.3" />
                        </g>
                    </g>
                </svg>
            </div>
        </div>
    </div>
</section>
<ul class="debug-panel"></ul>
<button class="generate-new-colors">Randomize Eye Colors</button>

Blinking Eyes，可以用鼠标控制眼睛的朝向。

svg, eye, blink

编辑器支持Emmet

快捷键

Blinking Eyes，可以用鼠标控制眼睛的朝向。

svg, eye, blink

基于TweenMax+DrawSVGPlugin实现的SVG眼睛图形构造动画

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

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：