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 0;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:0;width:13%;max-width:150px;height:10vh;border-radius:10%;box-shadow:-1px -1px 2px inset #aab1b4;font-size:.8rem}.slow-motion{top:55vh}
</style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <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="#d83940" stroke="#be252c"/><path d="M24.5 55.5,
					 L25.5 55.5" stroke-width="1" /><path d="M25.5 55.8, 
					 C16 58, 27 60, 23 70" stroke-width="1"/><path d="M23 70,
					 C18 78, 27 80, 23 90" stroke-width="1"/><ellipse cx="31.5" cy="25.5" rx="10" ry="13" fill="#de5d63" stroke="none" class="rotate"/><ellipse cx="30" cy="18" rx="4" ry="7" fill="#e17980" stroke="none" class="rotate-2"/><path d="M11 40,
					 Q10 35, 12 30, 
					 L13.5 32
					 Q11.5 35, 12 39
					 Z" fill="#f1d4d6" stroke="none" /><path d="M12.5 38.5
					 Q12 35, 14 32.5, 
					 L15.5 34, 
					 Q14 35,13.8 37, Z" fill="#f1d4d6" stroke="none" /><path d="M12.5 29, 
.........完整代码请登录后点击上方下载按钮下载查看