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,
Q15 25, 19 23,
Q18 24, 18 27,
Q15.5 28, 14 31,
Z" stroke="none" fill="#f1d4d6" /><path d="M14.5 31.5,
Q15.5 29, 18 28,
Q17.5 30, 18 31.5,
Q17 32, 16 33,
Z" stroke="none" fill="#f1d4d6"/><path d="M30 52,
Q40 46, 39.5 35,
L38, 34,
Q38 46, 30 52" stroke="none" fill="#f1d4d6"/><path d="M24.5 55.5,
L25.5 55.5,
C15 59, 28 65, 25 72,
C19 83, 23 83, 25 90" stroke="black" stroke-width="1"/></svg><svg viewbox="0 0 100 100" class="second-svg"><path d="M20 50,
L21 45,
C15 45, 14 45, 17 42
Q30 28, 35 32,
Q33 34, 35.5 36,
Q32 38, 34 44,
Q32 46, 28 48,
Q27 48, 27 46,
Q25 48, 20 50" stroke="#be252c" fill="#d83940"/><path d="M19 43,
L23 39,
Q24 38, 28 38,
Q24 40, 22 43,
Z" fill="#de5d63" stroke="none"/><path d="M25 37,
Q27 35, 32 34,
L29 37,
Q27 36, 25 37" fill="#de5d63" stroke="none"/><path d="M10 53,
Q10 46, 13 46,
Q12 48, 15 53,
C13 55, 11 50, 10 53" stroke="none" fill="#d83940"/><path d="M32 46,
L31 28,
L33 28,
Z" fill="#ded5d1" stroke="none"/><path d="M40 40,
L44 34,
L46 36,
Z" fill="#ded5d1" stroke="none"/><path d="M35 50,
L60 37,
L61 40,
Z" fill="#ded5d1" stroke="none"/><path d="M45 52,
L55 51,
L55 53,
Z" fill="#ded5d1" stroke="none"/><path d="M20 60,
Q19 59, 24 56,
C22 65, 21 58,20 60 " stroke="none" fill="#d83940"/><path d="M25 75,
C29 68, 18 70, 19 60,
Q23 63, 28 60,
Q28 63, 31 61,
Q31 64, 36 59,
C36 64, 39 59, 46 62,
C43 61, 36 74, 27 72,
C25 76, 30 79, 25 79,
C25 76, 22 78, 22 76,
Q24 76, 25 75
" stroke="none" fill="#d83940"/><path d="M48 60,
Q46 58, 53 56,
C51 63, 50 57, 48 60" stroke="none" fill="#d83940"/><rect x="50" y="45"width="10" height="5" rx="2" fill="#d83940" stroke="none"/><path d="M50 35,
L52 30,
Q54 32, 59 31,
Q56 36, 50 35" stroke="none" fill="#b82c32"/><path d="M35 53,
L55 62,
L56 60, Z" fill="#ded5d1" stroke="none"/><path d="M56 34,
L55 28,
C60 28, 60 32, 56 34" stroke="none" fill="#d83940"/><path d="M26.5 72.2,
L26.1 72,
C5 66, 28 76, 15 87,
Q5 95, 15 97 " stroke="black" stroke-width="1"/><path d="M32 56,
L30 75,
L34 75, Z" fill="#ded5d1" stroke="none"/><path d="M0 60,
L20 56,
L2 62, Z" fill="#ded5d1" stroke="none"/></svg><svg viewbox="0 0 100 100" class="third-svg"><path d="M17 47,
L18 42,
C12 42, 11 42, 14 39
Q27 25, 32 29,
Q30 31, 32.5 33,
Q29 35, 31 41,
Q29 43, 25 45,
Q24 45, 24 43,
Q22 45, 17 47" stroke="rgba(190,37,44, .2)" fill="rgba(216,57,64, 0.5)"/><path d="M7 50,
Q7 43, 10 43,
Q9 45, 12 50,
C10 52, 8 47, 7 50" stroke="none" fill="rgba(216,57,64, 0.5)"/><path d="M43 37,
L47 31,
L49 33,
Z" fill="rgba(222,213,209, .5)" stroke="none"/><path d="M37 48,
L62 35,
L63 38,
Z" fill="rgba(222,213,209, .5)" stroke="none"/><path d="M48 52,
L59 51,
L59 53,
Z" fill="rgba(222,213,209, .5)" stroke="none"/><path d="M19 59,
Q18 58, 23 55,
C21 64, 20 57,19 59 " stroke="none" fill="rgba(216,57,64, 0.5)"/><path d="M22 78,
C26 71, 15 73, 16 63,
Q20 66, 25 63,
Q25 66, 34 64,
Q28 67, 33 62,
C33 67, 36 62, 43 65,
C41 64, 33 77, 24 75,
C22 79, 27 81, 22 82,
C22 79, 19 81, 18 79,
Q21 79, 22 78
" stroke="none" fill="rgba(216,57,64, 0.5)"/><path d="M49 61,
Q49 59, 54 57,
C53 64, 51 58, 49 61" stroke="none" fill="rgba(216,57,64, 0.5)"/><rect x="53" y="43"width="10" height="5" rx="2" fill="rgba(216,57,64, 0.5)" stroke="none"/><path d="M53 32,
L55 27,
Q57 28, 61.5 28,
Q59 33, 53 32" stroke="none" fill="rgba(216,57,64, 0.5)"/><.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0