css3 眼珠旋转动画,CSS3 秋波流转/眼眸/眼珠转动

CSS

语言：

CSSSCSS

确定

body {

width: 100%;

height: 100%;

background: #236f61;

overflow: hidden;

}

.eye {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

width: 200px;

height: 200px;

border: 8px solid white;

border-radius: 140px 0 140px 0;

background: #236f61;

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

overflow: hidden;

box-shadow: #1e5f53 0 0 0 8px;

}

.eye .outline {

position: absolute;

top: -8px;

left: -8px;

width: 200px;

height: 200px;

border: 8px solid transparent;

border-radius: 140px 0 140px 0;

box-shadow: inset #236f61 0 0 0 8px;

}

.ball {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

z-index: 3;

width: 80px;

height: 80px;

background: #236f61;

border: 8px solid white;

border-radius: 100%;

box-shadow: #236f61 0 0 0 8px;

}

.pupil {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

z-index: 4;

width: 20px;

height: 20px;

border: 8px solid white;

border-radius: 100%;

-webkit-animation: look-around-you 9s linear alternate infinite;

animation: look-around-you 9s linear alternate infinite;

}

.line {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

width: 2px;

height: 360px;

background-color: white;

}

.line:nth-child(1) {

-webkit-transform: rotate(10deg);

transform: rotate(10deg);

}

.line:nth-child(2) {

-webkit-transform: rotate(20deg);

transform: rotate(20deg);

}

.line:nth-child(3) {

-webkit-transform: rotate(30deg);

transform: rotate(30deg);

}

.line:nth-child(4) {

-webkit-transform: rotate(40deg);

transform: rotate(40deg);

}

.line:nth-child(5) {

-webkit-transform: rotate(50deg);

transform: rotate(50deg);

}

.line:nth-child(6) {

-webkit-transform: rotate(60deg);

transform: rotate(60deg);

}

.line:nth-child(7) {

-webkit-transform: rotate(70deg);

transform: rotate(70deg);

}

.line:nth-child(8) {

-webkit-transform: rotate(80deg);

transform: rotate(80deg);

}

.line:nth-child(9) {

-webkit-transform: rotate(90deg);

transform: rotate(90deg);

}

.line:nth-child(10) {

-webkit-transform: rotate(100deg);

transform: rotate(100deg);

}

.line:nth-child(11) {

-webkit-transform: rotate(110deg);

transform: rotate(110deg);

}

.line:nth-child(12) {

-webkit-transform: rotate(120deg);

transform: rotate(120deg);

}

.line:nth-child(13) {

-webkit-transform: rotate(130deg);

transform: rotate(130deg);

}

.line:nth-child(14) {

-webkit-transform: rotate(140deg);

transform: rotate(140deg);

}

.line:nth-child(15) {

-webkit-transform: rotate(150deg);

transform: rotate(150deg);

}

.line:nth-child(16) {

-webkit-transform: rotate(160deg);

transform: rotate(160deg);

}

.line:nth-child(17) {

-webkit-transform: rotate(170deg);

transform: rotate(170deg);

}

.line:nth-child(18) {

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

}

.line:nth-child(19) {

-webkit-transform: rotate(190deg);

transform: rotate(190deg);

}

.line:nth-child(20) {

-webkit-transform: rotate(200deg);

transform: rotate(200deg);

}

.rotator {

position: absolute;

top: -40%;

left: -40%;

width: 180%;

height: 180%;

-webkit-animation: rotator 8s linear infinite;

animation: rotator 8s linear infinite;

}

.rotator-outside {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

width: 100%;

height: 100%;

max-width: 700px;

max-height: 600px;

border-radius: 100%;

overflow: hidden;

-webkit-animation: rotator 14s linear infinite;

animation: rotator 14s linear infinite;

}

.rotator-outside .line {

height: 100%;

background: #17483f;

}

.rotator-outside .cover {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

width: 100%;

height: 100%;

box-shadow: inset #236f61 0 0 80px 140px;

border-radius: 100%;

}

@-webkit-keyframes rotator {

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@keyframes rotator {

100% {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@-webkit-keyframes look-around-you {

19% {

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

20% {

-webkit-transform: translate3d(4px, -4px, 0);

transform: translate3d(4px, -4px, 0);

}

30% {

-webkit-transform: translate3d(4px, -4px, 0);

transform: translate3d(4px, -4px, 0);

}

50% {

-webkit-transform: translate3d(4px, -4px, 0);

transform: translate3d(4px, -4px, 0);

}

54% {

-webkit-transform: translate3d(-4px, -4px, 0);

transform: translate3d(-4px, -4px, 0);

}

70% {

-webkit-transform: translate3d(-4px, -4px, 0);

transform: translate3d(-4px, -4px, 0);

}

72% {

-webkit-transform: translate3d(4px, 4px, 0);

transform: translate3d(4px, 4px, 0);

}

80% {

-webkit-transform: translate3d(4px, 4px, 0);

transform: translate3d(4px, 4px, 0);

}

85% {

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

100% {

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

}

@keyframes look-around-you {

19% {

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

20% {

-webkit-transform: translate3d(4px, -4px, 0);

transform: translate3d(4px, -4px, 0);

}

30% {

-webkit-transform: translate3d(4px, -4px, 0);

transform: translate3d(4px, -4px, 0);

}

50% {

-webkit-transform: translate3d(4px, -4px, 0);

transform: translate3d(4px, -4px, 0);

}

54% {

-webkit-transform: translate3d(-4px, -4px, 0);

transform: translate3d(-4px, -4px, 0);

}

70% {

-webkit-transform: translate3d(-4px, -4px, 0);

transform: translate3d(-4px, -4px, 0);

}

72% {

-webkit-transform: translate3d(4px, 4px, 0);

transform: translate3d(4px, 4px, 0);

}

80% {

-webkit-transform: translate3d(4px, 4px, 0);

transform: translate3d(4px, 4px, 0);

}

85% {

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

100% {

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

}

}