svg+js实现箭穿爱心点赞喜欢开关效果代码-html代码-BFW代码库

svg+js实现箭穿爱心点赞喜欢开关效果代码

代码语言：html

所属分类：其他

代码描述：svg+js实现箭穿爱心点赞喜欢开关效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
  
<style>
body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: #f0f0f0;
	overflow: hidden;
}

.heart-icon {
	cursor: pointer;
}

#heart {
	width: 100px;
	height: 100px;
}

.filled {
	fill: red;
}
</style>

 
  
</head>

<body translate="no">
  <div class="heart-icon" id="heart">
	<svg viewBox="0 0 100 100">
		<mask id="heartMask">
    <path d="M 50 40 c -1 -2 -3 -4 -6 -4 c -6 0 -10 5 -10 10 c 0 9 13 16 16 19 c 3 -3 16 -10 16 -19 c 0 -5 -4 -10 -10 -10 c -3 0 -5 2 -6 4 Z" fill="#fff" />
  </mask>
		<path class="heartPath" d="M 50 40 c -1 -2 -3 -4 -6 -4 c -6 0 -10 5 -10 10 c 0 9 13 16 16 19 c 3 -3 16 -10 16 -19 c 0 -5 -4 -10 -10 -10 c -3 0 -5 2 -6 4 Z" fill="none" stroke="red" stroke-width="1.4">
			<animate attributeName="d" values="M 50 40 c -1 -2 -3 -4 -6 -4 c -6 0 -10 5 -10 10 c 0 9 13 16 16 19 c 3 -3 16 -10 16 -19 c 0 -5 -4 -10 -10 -10 c -3 0 -5 2 -6 4 Z" dur="300ms" begin="indefinite" repeatCount="none" keyTimes="0;0.1;0.5;0.8;1" keySplines="1 0 1 0; 0.5 0.5 0.5 0.5; 0.5 1 1 0.5; 0.5 1 1 0" calcMode="spline" fill="freeze" />
		</path>
			<circle cx="50" cy="50" r="0" fill="red" mask="url(#heartMask)">
				<animate attributeName="r" values="0;20" dur="750ms" begin="arrowPath.end" repeatCount="none" fill="freeze" />
				<animate id="heartC" attributeName="r" values="20;0" dur="750ms" begin="indefinite" repeatCount="none" fill="freeze" />
			</circle>
		<g id="arrow">
			<path d="M -17 0 l -4 2 l -5 0 l 3 -2 l -3 -2 l 5 0 z" fill=".........完整代码请登录后点击上方下载按钮下载查看