写了一下午，小牛牛终于完成了。可参见 十二生肖-牛
今天自己练习的CSS库也成功建立了。
<div class="cattle">
<div class="head"></div>
<div class="forhead"></div>
<div class="nose"></div>
<div class="nosek"></div>
<div class="mouth"></div>
<div class="ears">
<div class="inner"></div>
</div>
<div class="eyes">
<div class="inner"></div>
</div>
</div>
body{font-size: 10px;background:teal;margin:10em;}
/*牛*/
.cattle{
height: 268px;width: 205px;
position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;
}
.cattle *::before,
.cattle *::after{
content:'';
position:absolute;
}
.cattle .circle{
width:40px;height:40px;
position:absolute;margin:auto;border-radius:50%;
}
.cattle .oval{
width:100px;height:50px;position:absolute;
background: red;border-radius: 50px;
}
.cattle .head{
width:140px;height:127px;
background-color: #504e4a;
top:68px;left:0;right:0;
position:absolute;margin:auto;border-radius:50%;
}
.cattle .head::before{
width:126px;height:178px;background-color:#504e4a;
bottom:-45px;left:0;right:0;margin:auto;
position:absolute;border-radius: 50px;
}
.cattle .head::after{
width:105px;height:178px;
background-color:#504e4a;bottom:-20px;left:0;right:0;
margin:auto;border-radius:40px;
position:absolute;
}
.cattle .forhead::before{
width:60px;height:87px;background-color:#fff;
top:82px;z-index:1;left:0;right:0;margin:auto;
position:absolute;border-radius: 50px;
}
.cattle .forhead::after{
width:100px;height:50px;position:absolute;
background: red;border-radius: 50px;
width:78px;height:64px;background-color:#fff;
top: 62px;z-index:1;left:0;right:0;margin: auto;
}
.cattle .nose{
width:119px;height:78px;background-color:#fff;
bottom:30px;left:0;right:0;margin:auto;
position: absolute;border-radius: 50px;
}
.cattle .nose::before{
width:78px;height:93px;background-color:#fff;
bottom:-16px;left:-3px;position:absolute;border-radius: 50px;
}
.cattle .nose::after{
width:78px;height:93px;background-color:#fff;
bottom:-16px;right:-3px;position:absolute;border-radius: 50px;
}
/*鼻孔*/
.cattle .nosek::before{
width:16px;height:6px;
-webkit-transform:rotate(204deg);
transform: rotate(204deg);
background-color:#302f2e;
bottom:43px;left:80px;z-index: 4;
position:absolute;margin:auto;border-radius:50%;
}
.cattle .nosek::after{
width:16px;height:6px;
background-color:#302f2e;
-webkit-transform:rotate(-204deg);
transform:rotate(-204deg);
bottom:43px;right:80px;z-index: 4;
position:absolute;margin:auto;border-radius:50%;
}
.cattle .mouth{
width:84px;height:84px;background:#f3b06c;
z-index:3;bottom:0;left:0;right:0;
position:absolute;margin:auto;border-radius:50%;
}
.cattle .mouth::after{
width:45px;height:6px;position:absolute;
background-color: #302f2e;
bottom:18px;z-index:5;text-align: center;
margin:auto;right:0;left:0;
z-index:4;
}
.cattle .ears::before{
width:46px;height:95px;
-webkit-transform:rotate(-98deg);
transform:rotate(-98deg);
background-color:#504e4a;
top:28px;right:-10px;z-index:-1;
position:absolute;margin:auto;border-radius:50%;
}
.cattle .ears::after{
width:49px;height:95px;
-webkit-transform:rotate(98deg);
transform:rotate(98deg);
background-color:#504e4a;
top:28px;left:-10px;z-index:-1;
position:absolute;margin:auto;border-radius:50%;
}
.cattle .ears .inner::before{
width:34px;height:68px;
-webkit-transform:rotate(-102deg);
transform:rotate(-102deg);
background-color:#827163;
z-index:2;top:42px;right:-2px;
position:absolute;margin:auto;border-radius:50%;
}
.cattle .ears .inner::after{
width:34px;height:68px;
-webkit-transform:rotate(102deg);
transform: rotate(102deg);
background-color:#827163;
z-index:2;top:42px;left:-2px;
position:absolute;margin:auto;border-radius:50%;
}
.cattle .eyes::before{
width:23px;height:4px;position:absolute;
background-color: #302f2e;
z-index:4;top:120px;right:38px;
-webkit-transform:rotate(7deg);
transform:rotate(7deg);
box-shadow: -3px 5px;
}
.cattle .eyes::after{
width:23px;height:4px;position:absolute;
background-color:#302f2e;
z-index:4;top:120px;left:38px;
-webkit-transform:rotate(-7deg);
transform:rotate(-7deg);
box-shadow: 2px 5px;
}
.cattle .eyes .inner::before{
width:29px;height:29px;
background:
radial-gradient(circle at 65% 45%, white 0.25em, transparent 0.25em),
radial-gradient(circle at 50% 40%, #302f2e 1.7em, transparent 1.7em), #302f2e;
border-left:6px solid #504e4a;border-top:6px solid #504e4a;
border-radius:50%;right:45px;top:110px;z-index:5;
}
.cattle .eyes .inner::after{
width:29px;height:29px;
background:
radial-gradient(circle at 40% 45%, white 0.25em, transparent 0.25em),
radial-gradient(circle at 50% 40%, #302f2e 1.7em, transparent 1.7em), #302f2e;
border-right:6px solid #504e4a;border-top:6px solid #504e4a;
border-radius:50%;left:45px;top:110px;z-index:5;
}
网友评论