css picture

转载

mob604756ec5243 2020-05-05 17:44:00

文章标签 css picture CSS3 d3 css github 文章分类 Html/CSS 前端开发

https://github.com/cyanharlow

https://diana-adrianne.com/

demo

css picture_CSS3

https://github.com/cyanharlow/purecss-vignes

https://diana-adrianne.com/purecss-vignes/


.strawberry .fruit {
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: #D83131;
border-radius: 50% 50% 50% 50% / 24% 25% 62% 73%;
box-shadow: inset 0 -23px 25px -3px #750000, inset 0 0 16px 3px #690303, inset 10px -27px 34px 7px #800, inset 53px -19px 71px 3px #A40101, inset 57px 71px 13px -34px #FFDADA;
}

<div class="strawberry">
<div class="fruit"></div>
<div class="seed seed1"></div>
<div class="seed seed2"></div>
<div class="seed seed3"></div>
<div class="seed seed4"></div>
<div class="seed seed5"></div>
<div class="seed seed6"></div>
<div class="seed seed7"></div>
<div class="seed seed8"></div>
<div class="seed seed9"></div>
<div class="seed seed10"></div>
<div class="seed seed11"></div>
<div class="seed seed12"></div>
<div class="seed seed13"></div>
<div class="seed seed14"></div>
<div class="seed seed15"></div>
<div class="seed seed16"></div>
<div class="seed seed17"></div>
<div class="seed seed18"></div>
<div class="seed seed19"></div>
<div class="seed seed20"></div>
<div class="seed seed21"></div>
<div class="seed seed22"></div>
<div class="seed seed23"></div>
<div class="seed seed24"></div>
<div class="seed seed25"></div>
<div class="seed seed26"></div>
<div class="seed seed27"></div>
<div class="seed seed28"></div>
<div class="seed seed29"></div>
<div class="seed seed30"></div>
<div class="seed seed31"></div>
<div class="seed seed32"></div>
<div class="seed seed33"></div>
<div class="seed seed34"></div>
<div class="seed seed35"></div>
<div class="seed seed36"></div>
<div class="seed seed37"></div>
<div class="seed seed38"></div>
<div class="seed seed39"></div>
<div class="seed seed40"></div>
<div class="seed seed40"></div>
<div class="seed seed41"></div>
<div class="seed seed42"></div>
<div class="seed seed43"></div>
<div class="seed seed44"></div>
<div class="seed seed45"></div>
<div class="seed seed46"></div>
<div class="seed seed47"></div>
<div class="seed seed48"></div>
<div class="seed seed49"></div>
<div class="seed seed50"></div>
<div class="seed seed51"></div>
<div class="seed seed52"></div>
<div class="seed seed53"></div>
<div class="seed seed54"></div>
<div class="seed seed55"></div>
<div class="seed seed56"></div>
<div class="seed seed57"></div>
<div class="seed seed58"></div>
<div class="seed seed59"></div>
<div class="seed seed60"></div>
<div class="seed seed61"></div>
<div class="seed seed62"></div>
<div class="seed seed63"></div>
<div class="seed seed64"></div>
<div class="seed seed65"></div>
<div class="seed seed66"></div>
<div class="seed seed67"></div>
<div class="seed seed68"></div>
<div class="seed seed69"></div>
<div class="seed seed70"></div>
<div class="leaf">
<div class="tip1"></div>
<div class="tip2"></div>
<div class="tip3"></div>
<div class="tip4"></div>
<div class="tip5"></div>
<div class="tip6"></div>
</div>
<div class="stem"></div>
</div>