使用html+css代码绘制的爱心猫头鹰,没有使用任何图片,全部都是代码绘制的。
主要使用了CSS的一些伪元素和变形效果,比如画头:
.lovely-owl.head{
width:px;
height:px;
border-radius:50%;
background:palevioletred;
margin:3remauto0;
position:relative;
z-index:;
}
.lovely-owl.head:before,.lovely-owl.head:after{
content:"";
display:block;
width:0;
height:0;
border-left:35pxsolidtransparent;
border-right:35pxsolidtransparent;
border-bottom:50pxsolidpalevioletred;
position:absolute;
z-index:-1;
}
.lovely-owl.head:before{
top:-10px;
left:-14px;
-webkit-transform:rotate(-35deg);
transform:rotate(-35deg);
}
.lovely-owl.head:after{
right:-14px;
top:-10px;
-webkit-transform:rotate(35deg);
transform:rotate(35deg);
}
编辑器不能加代码,看起来不大方便。
代码出处: