css3 @keyframes屬性繪制鮮美多汁的橙子圖像元素,兩個跳動的橙子和切了一半的橙子動畫特效。
使用方法:
1、head引入css文件
<link rel="stylesheet" href="css/style.css"/>
2、body引入部分
<div class="scene">
<div class="spatter">
<span></span>
<span></span>
<span></span>
</div>
<div class="shadow shadow--2 shrink"></div>
<div class="orange orange--2 bounce">
<div class="dimple-holder">
<div class="dimples"></div>
<div class="dimples"></div>
<div class="inner-shadow"></div>
</div>
<div class="glow"></div>
<div class="stem">
<div class="stem__base"></div>
<div class="stem__stalk"></div>
</div>
</div>
<div class="shadow shadow--3"></div>
<div class="half-orange sigh">
<div class="peel-outer">
<div class="peel"></div>
<div class="dimple-holder">
<div class="dimples"></div>
<div class="dimples"></div>
<div class="inner-shadow"></div>
</div>
</div>
<div class="rind">
<div class="rind-inner">
<div class="juicy">
<div class="center"></div>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span> </div>
</div>
</div>
<div class="drip"></div>
</div>
<div class="shadow shrink"></div>
<div class="orange bounce">
<div class="dimple-holder">
<div class="dimples"></div>
<div class="dimples"></div>
<div class="inner-shadow"></div>
</div>
<div class="glow"></div>
<div class="stem">
<div class="stem__base"></div>
<div class="stem__stalk"> </div>
</div>
</div>
</div>