眨眼睛鼠标跟随

下载代码

html

css

分享到微信朋友圈

html

<section>
  <div class="container"> 
    <div class="odd row-1">
      <div class="eye-element-container">
        <svg class="eye-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://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="http://www.w3.org/2000/svg" xmlns:xlink="http://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 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="http://www.w3.org/2000/svg" xmlns:xlink="http://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 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="even row-2">
      <div class="eye-element-container">
        <svg class="eye-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://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 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="http://www.w3.org/2000/svg" xmlns:xlink="http://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 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-3">
      <div class="eye-element-container">
        <svg class="eye-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://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="http://www.w3.org/2000/svg" xmlns:xlink="http://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 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="http://www.w3.org/2000/svg" xmlns:xlink="http://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 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="even row-4">
      <div class="eye-element-container">
        <svg class="eye-svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://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="http://www.w3.org/2000/svg" xmlns:xlink="http://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="http://www.w3.org/2000/svg" xmlns:xlink="http://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 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="http://www.w3.org/2000/svg" xmlns:xlink="http://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 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="http://www.w3.org/2000/svg" xmlns:xlink="http://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 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>
</section>
<ul class="debug-panel"></ul>
<button class="generate-new-colors">随机化眼睛颜色</button>

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);
}

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();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg