jQuery css3爱心喜欢动画

【原创】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>

文件目录

本资源来自：帝国模板代码 » css3实例 » jQuery css3爱心喜欢动画

注：此资源非帝国CMS模板/特效/源码，需要帝国CMS整站模板源码的小伙伴，请移步 帝国CMS模板，感谢支持！