所在的位置: html >> html介绍 >> CSSHTML代码画的猫头鹰

CSSHTML代码画的猫头鹰

使用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);

}

编辑器不能加代码,看起来不大方便。

代码出处:


转载请注明:http://www.aierlanlan.com/rzfs/8024.html