自创火影忍者写轮眼效果

运行效果：

三勾玉写轮眼

然后从网上找 到写轮眼图片 切图

勾玉 : xielunyan-01.png

xielunyan-02.png

xielunyan-03.png

HTML:

  自创 写轮眼 效果       

CSS：

* {

padding: 0;

margin: 0;

}

.demo {

position: relative;

margin: 100px auto;

background: red;

width: 200px;

height: 200px;

border-radius: 50%;

}

.a {

position: absolute;

top: 50%;

left: 50%;

width: 140px;

height: 140px;

border: 1px solid #000;

margin: -70px 0 0 -70px;

border-radius: 50%;

animation: zhuan 2s ease infinite;

}

.x {

position: absolute;

width: 10px;

height: 10px;

background: #000;

/* background: url(../img/xielunyan-01.png);*/

left: 50%;

TOP: -5PX;

margin: 0 0 0 -5PX;

}

.x>img {

width: 20px;

height: 30px;

margin: -12px 0 0 0;

}

.y {

position: absolute;

width: 10px;

height: 10px;

background: #000000;

bottom: -5PX;

TOP: 66%;

}

.y>img {

width: 28px;

height: 23px;

margin: 0 0 0 -10px;

}

.z {

position: absolute;

width: 10px;

height: 10px;

background: #000000;

bottom: -5PX;

right: 0PX;

TOP: 66%;

}

.z>img {

width: 28px;

height: 23px;

margin: 0 0 0 -10px;

}

@keyframes zhuan {

from {

transform: rotateZ(-25deg);

opacity: 0;

}

to {

transform: rotateZ(335deg);

opacity: 1;

}

}

.dot {

width: 20px;

height: 20px;

border-radius: 50%;

background: #000000;

position: absolute;

left: 60px;

top: 60px

}