html5模拟平板,HTML5 拟人面具 逼真的眼球运动模拟

CSS

语言：

CSSSCSS

确定

html {

height: 100%;

}

body {

background-image: linear-gradient(180deg, #003, #024);

}

#face {

width: 240px;

height: 280px;

border-radius: 150px;

position: absolute;

top: 50%;

left: 50%;

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

box-shadow: inset rgba(0, 0, 0, .8) 0 -10px 40px;

background-image: radial-gradient(at 100px 40px, #f0e0e0, #e08080);

}

#eye1 {

top: 50%;

left: 50%;

transform: translate(-100%, -90%);

}

#eye2 {

top: 50%;

left: 50%;

transform: translate(10%, -90%);

}

#mouth {

width: 100px;

height: 40px;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-43%, 30px);

background-color: #803030;

border-radius: 50px / 20px;

box-shadow: inset #000 0 -15px 40px;

border: solid #e08080 4px;

/* ring around each eye */

}

.ring {

width: 80px;

height: 80px;

position: absolute;

background: #ea8080;

border-radius: 100px;

box-shadow: inset rgba(0, 0, 0, .2) 0 -10px 50px;

background-image: -webkit-gradient(radial, 50% 8%, 0, 50% 40%, 120, color-stop(0, rgba(255, 255, 255, .8)), color-stop(0.8, rgba(255, 255, 255, 0)), color-stop(0.8, rgba(0, 0, 0, 0)), color-stop(1, rgba(0, 0, 0, .33)));

background-image: -moz-radial-gradient(50% 21% 0deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 80%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .33) 100%);

background-image: -o-radial-gradient(50% 21% 0deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 80%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .33) 100%);

background-image: radial-gradient(50% 21% 0deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 80%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .33) 100%);

border: 2px solid #60000d 0;

}

.eye {

transition: all 0.2s ease-in-out;

position: absolute;

top: 50%;

left: 50%;

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

width: 60px;

height: 60px;

border-radius: 100%;

background-color: #eee;

box-shadow: inset rgba(0, 0, 0, .4) 0 -1px 3px 1px, inset rgba(0, 0, 0, .5) 0 -5px 20px, rgba(0, 0, 0, .5) 0 -5px 10px, rgba(255, 255, 255, .5) 0 5px 10px;

background-repeat: no-repeat;

background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 40, color-stop(0.12, #000), color-stop(0.22, #bfaa40), color-stop(0.4, #733326), color-stop(0.5, rgba(255, 255, 255, 0)));

background-image: -moz-radial-gradient(50% 50% 0deg, #000 12%, #bfaa40 22%, #733326 40%, rgba(255, 255, 255, 0) 50%);

background-image: -o-radial-gradient(50% 21% 0deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 80%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, .33) 100%);

background-image: radial-gradient(50% 50% 0deg, circle, #000 12%, #bfaa40 22%, #733326 40%, rgba(255, 255, 255, 0) 50%);

}

.eye:before {

content: "";

position: absolute;

top: 20%;

left: 32%;

border-radius: 5px;

width: 10px;

height: 10px;

background-color: #fff;

transform: skewX(-10deg);

transition: all 0.2s ease;

opacity: 0.9;

}

.eye.lookl {

background-position: -18px 0px;

}

.eye.lookr {

background-position: 18px 0;

}

.eye.close {

height: 3px;

}

.eye.close:before {

opacity: 0;

}

#mouth.close {

height: 4px;

transform: translate(-43%, 45px);

}

button{border:none; padding:10px; background: orange; font-size:18px;}