svg+原生js实现针扎破气球动画效果带声音-html代码-BFW代码库

svg+原生js实现针扎破气球动画效果带声音

代码语言：html

所属分类：动画

代码描述：svg+原生js实现针扎破气球动画效果带声音

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body{
	background: #f9f0ae;
}

.content{
	width: 100%;
	position: absolute;
}

svg{
	stroke-width: .3;
	fill: none;
	width: 100%;
	height: 100vh;
	stroke-linecap: round;
  stroke-linejoin: round;
}

.main-svg{
	visibility: visible;
	position: absolute;
}

.second-svg{
	visibility: hidden;
	position: absolute;
	top:-120px;
	left: -80px;
}

.third-svg{
	z-index: -1;
	visibility: hidden;
	position: absolute;
	top:-120px;
	left: -60px;
}

.rotate{
	transform: rotate(20deg);
}

.rotate-2{
	transform: rotate(30deg);
}

.needle{
	width: 150px;
	height: 8px;
	background: grey;
	position: absolute;
	left: 80vw;
	top: 35vh;
	border-radius: 0 10px 10px 0;
}

.needle:before{
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	border-width: 4px 20px 4px 0px;
	border-color: transparent grey transparent transparent;
	border-style: solid;
	position: absolute;
	left: -20px;
}

.needle:after{
	content: "";
	display: inline-block;
	width: 8px;
	height: 3px;
	background: #f9f0ae;
	border-radius: 40%;
	position: absolute;
	left: 135px;
	top: 2.5px;
}

button{
	position: absolute;
	left: 80vw;
	top: 40vh;
	outline: none;
	width: 13%;
	max-width: 150px;
  height: 10vh;
	border-radius: 10%;
	box-shadow: -1px -1px 2px inset #aab1b4;
	font-size: .8rem;
}
</style>

</head>
<body translate="no">
<div class="content">
<svg viewbox="0 0 100 100" class="main-svg">
<path d="M24 55,
					 C0 45, 10 20, 25 20, 
					 C40 20, 50 45, 26 55" fill="#d83940" stroke="#be252c" />
<path d="M24 55,
					 Q25 57, 22 59, 
					 Q25 59, 25 58, 
					 Q26 59, 28 59, 
					 Q25 57, 26 55" fill=&.........完整代码请登录后点击上方下载按钮下载查看