【原創(chuàng)】jQuery基于css3屬性點擊紅色愛心點贊,我喜歡愛心滿出動畫特效。
使用方法:
1、head引入css文件
<link rel="stylesheet" href="css/style.css">
2、head引入js文件
<script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript" src='js/anime.min.js'></script>
3、body引入HTML代碼
<div class="controls__item like">
<svg width="397" height="470" version="1">
<path class="main" d="M211 226c9-9 21-14 34-14 29 0 50 26 50 54 0 34-53 77-78 95-5 3-7 3-12 0-25-18-78-61-78-95 0-28 21-54 50-54 13 0 25 5 34 14z"/>
<path class="second" d="M211 226c9-9 21-14 34-14 29 0 50 26 50 54 0 34-53 77-78 95-5 3-7 3-12 0-25-18-78-61-78-95 0-28 21-54 50-54 13 0 25 5 34 14z"/>
<path class="line line1" d="M171 294c-43-12-106-47-111-62-18-52 0-125 0-125"/>
<path class="line line2" d="M197 244c-11-31-25-75-32-119-12-79-5-125-5-125"/>
<path class="line line3" d="M258 251c23-18 49-43 61-67 25-50 19-74 13-153"/>
<path class="line line4" d="M246 304c22 15 54 34 79 37 46 7 58-53 62-88s-8-96-8-96"/>
<path class="line line5" d="M217 330c6 36 23 85 62 111 69 46 117-56 117-56"/>
<path class="line line6" d="M204 330c-9 46-25 112-46 134-34 35-66-111-66-111"/>
<path class="line line7" d="M191 309c-24 25-69 63-108 74C15 402 0 234 0 234"/>
</svg>
<img class="heart heart1" src="img/l.png" width="40" alt="">
<img class="heart heart2" src="img/l.png" width="40" alt="">
<img class="heart heart3" src="img/l.png" width="40" alt="">
<img class="heart heart4" src="img/l.png" width="40" alt="">
<img class="heart heart5" src="img/l.png" width="40" alt="">
<img class="heart heart6" src="img/l.png" width="40" alt="">
<img class="heart heart7" src="img/l.png" width="40" alt="">
</div>
<script type="text/javascript" src="js/index.js"></script>