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>

使用声明

1. 本站所有素材（未指定商用），仅限学习交流。
2. 会员在本站下载的原创商用和VIP素材后，只拥有使用权，著作权归原作者及17素材网所有。
3. 原创商用和VIP素材，未经合法授权，请勿用于商业用途，会员不得以任何形式发布、传播、复制、转售该素材，否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途，织梦系统商业用途请预先授权。

查看演示下载资源

171 6640 36