html页面鼠标追踪,HTML5监视跟踪之眼

CSS

语言：

CSSSCSS

确定

body {

background-color: #323133;

margin: 0;

font-family: 'Average Sans', sans-serif;

}

body .header {

position: fixed;

height: 100px;

background-color: #3C3B3D;

top: 0px;

left: 0px;

right: 0px;

}

body .header .eye {

width: 100px;

height: 100px;

background-color: #ED5565;

border-top-right-radius: 50px;

border-top-left-radius: 50px;

overflow: hidden;

top: 0px;

left: 0px;

-webkit-transition: background-color 0s 0.85s;

transition: background-color 0s 0.85s;

-webkit-transform: rotate(90deg);

transform: rotate(90deg);

}

body .header .eye.elastic {

-webkit-transition: cubic-bezier(0.64, 0.57, 0.67, 1.53) 1s;

transition: cubic-bezier(0.64, 0.57, 0.67, 1.53) 1s;

}

body .header .eye .skin {

z-index: 1;

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

-webkit-animation: spawn 1s ease-in;

animation: spawn 1s ease-in;

-webkit-animation-delay: -0.15s;

animation-delay: -0.15s;

width: 142px;

height: 142px;

border-radius: 100%;

opacity: 0;

}

body .header .eye .ball {

z-index: 2;

position: absolute;

top: 25px;

left: 25px;

width: 50px;

height: 50px;

background-color: #F5F7FA;

-webkit-transform: rotate(-90deg);

transform: rotate(-90deg);

border-radius: 100%;

-webkit-animation: blink 10s ease infinite;

animation: blink 10s ease infinite;

-webkit-animation-delay: -8s;

animation-delay: -8s;

overflow: hidden;

cursor: pointer;

}

body .header .eye .ball .stem {

position: absolute;

top: 50%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

width: 0px;

height: 0px;

}

body .header .eye .ball .stem .pupil {

position: absolute;

top: 0%;

left: 50%;

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

width: 12.5px;

height: 12.5px;

border-radius: 100%;

background-color: #000;

}

body .header .eye .ball:hover {

-webkit-animation: none;

animation: none;

}

body .header .eye .ball:hover .stem {

height: 0px !important;

}

body .header .eye .ball:hover .stem .pupil {

width: 20px !important;

height: 20px !important;

}

body .header .eye:hover .ball .stem {

-webkit-transition: height 0.1s ease;

transition: height 0.1s ease;

}

body .header .eye:hover .ball .stem .pupil {

-webkit-transition: width 0.15s ease, height 0.15s ease;

transition: width 0.15s ease, height 0.15s ease;

}

body .header a {

color: #fff;

text-decoration: none;

padding: 20px;

font-size: 20px;

}

@-webkit-keyframes blink {

0%, 90%, 100% {

width: 50px;

margin: 0px 0px;

}

94%,

95% {

width: 0px;

margin: 0px 25px;

}

}

@keyframes blink {

0%, 90%, 100% {

width: 50px;

margin: 0px 0px;

}

94%,

95% {

width: 0px;

margin: 0px 25px;

}

}

@-webkit-keyframes spawn {

0% {

z-index: -1;

width: 0px;

height: 0px;

opacity: 1;

}

100% {

z-index: -1;

width: 142px;

height: 142px;

opacity: 1;

}

}

@keyframes spawn {

0% {

z-index: -1;

width: 0px;

height: 0px;

opacity: 1;

}

100% {

z-index: -1;

width: 142px;

height: 142px;

opacity: 1;

}

}