用1个DIV画图根据background

日期:2021-03-06 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

这些照片全是用1个DIV绘图出来的,实际上基本原理其实不繁杂。

 

这些照片全是由CSS绘图出来的,根据background-image叠加完成,

如蘑菇头的完成,根据 radial-gradient 轴向渐变色 , linear-gradient 线形渐变色互相叠加完成,如:

拷贝编码
编码以下:

div {
width: 170px;
height: 140px;
background-image:
radial-gradient(circle at 50% 120%, rgba(0,0,0,0.7) 23%, rgba(0,0,0,0) 48%),
linear-gradient(30deg, rgba(0,0,0,0.4) 10%, rgba(0,0,0,0) 20%),
radial-gradient(circle at 50% 33%, #f8f6f7 32%, rgba(255,255,255,0) 32%),
radial-gradient(circle at ⑴3% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%),
radial-gradient(circle at 113% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%),
linear-gradient(to bottom, #ef0015 20%, #b2000c 100%);
border-radius: 140px 140px 80px 80px;
}

另外有前后左右遮挡关联的根据:before和:after伪元素的background-image来完成。

PS: 此种技巧对其实不彻底适用旧版IE