微信掃碼登錄 ×
當(dāng)前位置 :首頁 > 代碼 > html5 css3 > css3實例 > jQuery css3愛心喜歡動畫
代碼
jQuery css3愛心喜歡動畫

jQuery css3愛心喜歡動畫

收藏
jQuery css3愛心喜歡動畫
【原創(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>

使用聲明

1. 本站所有素材(未指定商用),僅限學(xué)習(xí)交流。
2. 會員在本站下載的原創(chuàng)商用和VIP素材后,只擁有使用權(quán),著作權(quán)歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材,未經(jīng)合法授權(quán),請勿用于商業(yè)用途,會員不得以任何形式發(fā)布、傳播、復(fù)制、轉(zhuǎn)售該素材,否則一律封號處理。
4. 本平臺織夢模板僅展示和個人非盈利用途,織夢系統(tǒng)商業(yè)用途請預(yù)先授權(quán)。

x
×
×

注冊

QQ注冊 立即下載 微信注冊 立即下載

簽到成功!

已連續(xù)簽到1天,連續(xù)簽到3天可獲得50積分

知道了