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 {
<