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;
	he.........完整代码请登录后点击上方下载按钮下载查看