不用圖片,使用CSS3做出一個跳動的心。
HTML:
<span style="color: #0000ff;"> <</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="box"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="right"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
首先兩個div浮動,左上和右上角變圓:
<span style="color: #800000;"> .box</span>{<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 100px</span>; }<span style="color: #800000;"> .left,.right</span>{<span style="color: #ff0000;"> float</span>:<span style="color: #0000ff;"> left</span>; }<span style="color: #800000;"> .box div</span>{<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;">160px</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;"> border-radius</span>:<span style="color: #0000ff;"> 50px 50px 0 0</span>;<span style="color: #ff0000;"> background</span>:<span style="color: #0000ff;"> red</span>; }
變成:
接著讓兩個div旋轉一下,左邊的以右下角為旋轉點正時針轉45度,右邊的以左下角為旋轉點逆時針轉45度,加點陰影:
<span style="color: #800000;">.left</span>{<span style="color: #ff0000;"> transform-origin</span>:<span style="color: #0000ff;"> 100% 100%</span>;<span style="color: #ff0000;"> transform</span>:<span style="color: #0000ff;"> rotate(45deg)</span>;<span style="color: #ff0000;"> box-shadow</span>:<span style="color: #0000ff;"> 8px 10px 10px #888888</span>; }<span style="color: #800000;"> .right</span>{<span style="color: #ff0000;"> transform-origin</span>:<span style="color: #0000ff;"> 0% 100%</span>;<span style="color: #ff0000;"> transform</span>:<span style="color: #0000ff;"> rotate(-45deg)</span>;<span style="color: #ff0000;"> box-shadow</span>:<span style="color: #0000ff;"> -10px -1px 10px #888888</span>; }<br><br>
心形出來了:
讓心動起來,加點動畫吧:
<span style="color: #800000;"> .box div</span>{<span style="color: #ff0000;"> animation</span>:<span style="color: #0000ff;"> lb 1s cubic-bezier(0.3,0.4,0.3,1) 0s infinite</span>;<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> 0px solid red</span>;/*这个不能少*/ }<span style="color: #800000;"> @keyframes lb</span>{<span style="color: #ff0000;"> 0%{ border</span>:<span style="color: #0000ff;"> 10px solid red</span>;<span style="color: #ff0000;"> border-radius</span>:<span style="color: #0000ff;"> 58px 58px 0 0</span>; }<span style="color: #800000;"> 50%</span>{<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> 20px solid red</span>;<span style="color: #ff0000;"> border-radius</span>:<span style="color: #0000ff;"> 66px 66px 0 0</span>; }<span style="color: #800000;"> 100%</span>{<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;">0px solid red</span>;<span style="color: #ff0000;"> border-radius</span>:<span style="color: #0000ff;"> 50px 50px 0 0</span>; }<span style="color: #800000;"> }</span>
好了,一顆跳動的心就完成了。
完整CSS:
<span style="color: #800000;"> <style> .box</span>{<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;"> 100px</span>; }<span style="color: #800000;"> .left,.right</span>{<span style="color: #ff0000;"> float</span>:<span style="color: #0000ff;"> left</span>; }<span style="color: #800000;"> .box div</span>{<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;">160px</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;"> border-radius</span>:<span style="color: #0000ff;"> 50px 50px 0 0</span>;<span style="color: #ff0000;"> background</span>:<span style="color: #0000ff;"> red</span>;<span style="color: #ff0000;"> animation</span>:<span style="color: #0000ff;"> lb 1s cubic-bezier(0.3,0.4,0.3,1) 0s infinite</span>;<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> 0px solid red</span>; }<span style="color: #800000;"> .left</span>{<span style="color: #ff0000;"> transform-origin</span>:<span style="color: #0000ff;"> 100% 100%</span>;<span style="color: #ff0000;"> transform</span>:<span style="color: #0000ff;"> rotate(45deg)</span>;<span style="color: #ff0000;"> box-shadow</span>:<span style="color: #0000ff;"> 8px 10px 10px #888888</span>; }<span style="color: #800000;"> @keyframes lb</span>{<span style="color: #ff0000;"> 0%{ border</span>:<span style="color: #0000ff;"> 10px solid red</span>;<span style="color: #ff0000;"> border-radius</span>:<span style="color: #0000ff;"> 58px 58px 0 0</span>; }<span style="color: #800000;"> 50%</span>{<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> 20px solid red</span>;<span style="color: #ff0000;"> border-radius</span>:<span style="color: #0000ff;"> 66px 66px 0 0</span>; }<span style="color: #800000;"> 100%</span>{<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;">0px solid red</span>;<span style="color: #ff0000;"> border-radius</span>:<span style="color: #0000ff;"> 50px 50px 0 0</span>; }<span style="color: #800000;"> } .right</span>{<span style="color: #ff0000;"> transform-origin</span>:<span style="color: #0000ff;"> 0% 100%</span>;<span style="color: #ff0000;"> transform</span>:<span style="color: #0000ff;"> rotate(-45deg)</span>;<span style="color: #ff0000;"> box-shadow</span>:<span style="color: #0000ff;"> -10px -1px 10px #888888</span>; }<span style="color: #800000;"> </style> </span>