用python画写轮眼_仿写轮眼修改版

PS: 2018/06/07 图片失效,补回去.

纯css3制作写轮眼开眼及进化过程原作者已经找不到了,只能直接贴搜到的转帖.

这是以前贪好玩跟着别人做出来练手的，结构都一样，主要是加个背景修改细节跟动画而已，轮回眼部分有些溢出，但是现在不往动画研究就懒得改了，图个一乐吧。(建议全屏预览)

背景图长这样子

因为中间的过渡动画没办法截出来,只能贴上变化的画面,强烈建议看看

因为全部代码太长,我分开贴出来

Html

Css

* {

margin: 0;

padding: 0;

}

body {

background: #000;

width: 1350px;

}

.wrapper {

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

}

.container {

width: 800px;

height: 200px;

margin: 200px auto;

/*background: #000000;*/

position: relative;

}

.eyesBoxs {

width: 130px;

height: 70px;

position: absolute;

top: 50px;

}

.pullLeft {

top: 60px;

left: 225px;

}

.pullRight {

top: 60px;

right: 10px;

}

.profile {

width: 130px;

height: 70px;

/*background: #fff;*/

position: absolute;

top: 0;

left: 0;

/*border-radius: 0 70px 0 50px;*/

}

/*.shadow {

display: block;

width: 130px;

height: 70px;

position: absolute;

top: 0;

z-index: 5;

border-radius: 0 90px 0 60px;

box-shadow: 5px 12px 2px 5px rgba(0, 0, 0, .25) inset;

}*/

.skewLeft {

border-radius: 10px 180px 25px 50px;

transform: skew(20deg, 5deg);

-webkit-transform: skew(20deg, 1deg);

}

.skewRight {

border-radius: 0 100px 10px 140px;

transform: skew(-10deg, -1deg) scale(-1, 1);

-webkit-transform: skew(-10deg, 1deg) scale(-1, 1);

-o-transform: scale(-1, 1);

}

.basic {

width: 60px;

height: 60px;

background: #000;

position: absolute;

top: 50%;

left: 50%;

z-index: 10;

margin-top: -30px;

border-radius: 60%;

}

.basic:before {

content: "";

display: block;

width: 10px;

height: 11px;

position: absolute;

left: 15px;

top: 15px;

z-index: 100;

border-radius: 60%;

background-image: radial-gradient(circle, rgb(225, 225, 225), rgb(225, 225, 225), rgba(225, 225, 225, 0.9), rgba(225, 225, 225, 0.3));

-webkit-background-image: radial-gradient(circle, rgb(225, 225, 225), rgb(225, 225, 225), rgba(225, 225, 225, 0.9), rgba(225, 225, 225, 0.3));

-o-background-image: radial-gradient(circle, rgb(225, 225, 225), rgb(225, 225, 225), rgba(225, 225, 225, 0.9), rgba(225, 225, 225, 0.3));

}

.pullLeft .basic {

margin-left: -33px;

}

.pullRight .basic {

margin-left: -27px;

}

.eyes {

width: 55px;

height: 55px;

background: #ff0000;

position: absolute;

top: 8px;

border-radius: 60%;

box-shadow: 0 0 2px 4px #bd0000 inset, 0 0 0 2px #000;

}

.pullLeft .eyes {

<