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