js监听麦克风声音让他发怒动画效果代码
代码语言：html
所属分类：多媒体
代码描述：js监听麦克风声音让他发怒动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
box-sizing: border-box;
}
:root {
--bg: #282f52;
}
body {
background: linear-gradient(#75bdf0 0 55%, #73a145 55.5%);
color: #fff;
font-family: sans-serif;
font-weight: bold;
min-height: 100vh;
display: grid;
place-items: center;
}
h1 {
color: hsl(var(--hue,100), 80%, 50%);
font-size: 10vmin;
}
.domo {
display: none;
height: 30vmin;
overflow: visible !important;
}
</style>
</head>
<body>
<svg class="domo" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 594 572">
<g class="domo__arm domo__arm--right">
<path fill="#83533A" d="M513.648 469c9.325 18.801 26.553 22.465 45.354 13.14s26.482-32.127 17.157-50.928c-4.16-8.387-14.438-12.789-18.975-18-4.536-5.212-73.514-148.213-73.514-148.213l-51.959 25.772S503.648 433 505.225 438.984c1.577 5.984 4.263 21.629 8.423 30.016z" />
<path fill="url(#paint0_linear)" d="M513.648 469c9.325 18.801 26.553 22.465 45.354 13.14s26.482-32.127 17.157-50.928c-4.16-8.387-14.438-12.789-18.975-18-4.536-5.212-73.514-148.213-73.514-148.213l-51.959 25.772S503.648 433 505.225 438.984c1.577 5.984 4.263 21.629 8.423 30.016z" />
</g>
<g class="domo__arm domo__arm--left">
<path fill="#83533A" d="M79.396 463c-9.325 18.801-26.552 22.465-45.354 13.14-18.8-9.325-26.482-32.127-17.157-50.928 4.16-8.387 14.438-12.789 18.975-18 4.536-5.212 73.514-148.213 73.514-148.213l51.96 25.772S89.396 427 87.819 432.984c-1.576 5.984-4.263 21.629-8.423 30.016z" />
<path fill="url(#paint1_linear)" d="M79.396 463c-9.325 18.801-26.552 22.465-45.354 13.14-18.8-9.325-26.482-32.127-17.157-50.928 4.16-8.387 14.438-12.789 18.975-18 4.536-5.212 73.514-148.213 73.514-148.213l51.96 25.772S89.396 427 87.819 432.984c-1.576 5.984-4.263 21.629-8.423 30.016z" />
</g>
<path class="domo__body" fill="#83533A" d="M142 0c-24.853 0-45 20.147-45 45v484.721c-.02.104-.036.21-.049.317L92.677 565.4A5.002 5.002 0 0097 570.96v.04h180v-.053a5.002 5.002 0 004.219-5.628l-4.143-30.132a5.161 5.161 0 00-.076-.419v-8.403c1.429-12.19 6.415-22.865 19.5-22.865 13.625 0 18.869 11.575 20.5 24.383v7.385a5.161 5.161 0 00-.076.419l-4.143 30.132a5 5 0 004.954 5.681h178.624a5 5 0 004.964-5.6l-4.274-35.362c-.008-.065-.018-.13-.028-.195a2.387 2.387 0 00-.021-.122V45c0-24.853-20.147-45-45-45H142z" />
<path fill="url(#paint2_linear)" d="M142 0c-24.853 0-45 20.147-45 45v484.721c-.02.104-.036.21-.049.317L92.677 565.4A5.002 5.002 0 0097 570.96v.04h180v-.053a5.002 5.002 0 004.219-5.628l-4.143-30.132a5.161 5.161 0 00-.076-.419v-8.403c1.429-12.19 6.415-22.865 19.5-22.865 13.625 0 18.869 11.575 20.5 24.383v7.385a5.161 5.161 0 00-.076.419l-4.143 30.132a5 5 0 004.954 5.681h178.624a5 5 0 004.964-5.6l-4.274-35.362c-.008-.065-.018-.13-.028-.195a2.387 2.387 0 00-.021-.122V45c0-24.853-20.147-45-45-45H142z" />
<path fill="url(#paint3_linear)" d="M142 0c-24.853 0-45 20.147-45 45v484.721c-.02.104-.036.21-.049.317L92.677 565.4A5.002 5.002 0 0097 570.96v.04h180v-.053a5.002 5.002 0 004.219-5.628l-4.143-30.132a5.161 5.161 0 00-.076-.419v-8.403c1.429-12.19 6.415-22.865 19.5-22.865 13.625 0 18.869 11.575 20.5 24.383v7.385a5.161 5.161 0 00-.076.419l-4.143 30.132a5 5 0 004.954 5.681h178.624a5 5 0 004.964-5.6l-4.274-35.362c-.008-.065-.018-.13-.028-.195a2.387 2.387 0 00-.021-.122V45c0-24.853-20.147-45-45-45H142z" />
<path fill="url(#paint4_linear)" d="M142 0c-24.853 0-45 20.147-45 45v484.721c-.02.104-.036.21-.049.317L92.677 565.4A5.002 5.002 0 0097 570.96v.04h180v-.053a5.002 5.002 0 004.219-5.628l-4.143-30.132a5.161 5.161 0 00-.076-.419v-8.403c1.429-12.19 6.415-22.865 19.5-22.865 13.625 0 18.869 11.575 20.5 24.383v7.385a5.161 5.161 0 00-.076.419l-4.143 30.132a5 5 0 004.954 5.681h178.624a5 5 0 004.964-5.6l-4.274-35.362c-.008-.065-.018-.13-.028-.195a2.387 2.387 0 00-.021-.122V45c0-24.853-20.147-45-45-45H142z" />
<path fill="url(#paint5_linear)" d="M142 0c-24.853 0-45 20.147-45 45v484.721c-.02.104-.036.21-.049.317L92.677 565.4A5.002 5.002 0 0097 570.96v.04h180v-.053a5.002 5.002 0 004.219-5.628l-4.143-30.132a5.161 5.161 0 00-.076-.419v-8.403c1.429-12.19 6.415-22.865 19.5-22.865 13.625 0 18.869 11.575 20.5 24.383v7.385a5.161 5.161 0 00-.076.419l-4.143 30.132a5 5 0 004.954 5.681h178.624a5 5 0 004.964-5.6l-4.274-35.362c-.008-.065-.018-.13-.028-.195a2.387 2.387 0 00-.021-.122V45c0-24.853-20.147-45-45-45H142z" />
<path class="domo__anger" fill="url(#paint6_linear)" d="M142 0c-24.853 0-45 20.147-45 45v484.721c-.02.104-.036.21-.049.317L92.677 565.4A5.002 5.002 0 0097 570.96v.04h180v-.053a5.002 5.002 0 004.219-5.628l-4.143-30.132a5.161 5.161 0 00-.076-.419v-8.403c1.429-12.19 6.415-22.865 19.5-22.865 13.625 0 18.869 11.575 20.5 24.383v7.385a5.161 5.161 0 00-.076.419l-4.143 30.132a5 5 0 004.954 5.681h178.624a5 5 0 004.964-5.6l-4.274-35.362c-.008-.065-.018-.13-.028-.195a2.387 2.387 0 00-.021-.122V45c0-24.853-20.147-45-45-45H142z" />
<g class="domo__eyes">
<ellipse cx="162.922" cy="83" fill="#000" rx="24.922" ry="25" />
<ellipse cx="431.922" cy="83" fill="#000" rx="24.922" ry="25" />
<path class="domo__eyes--angry" fill="#000" fill-rule="evenodd" d="M413.382 93.806c18.225 0 33-13.208 33-29.5 0-.776-.034-1.545-.1-2.306 6.692 4.483 11.1 12.128 11.1 20.806 0 13.807-11.158 25-24.922 25-9.889 0-18.433-5.779-22.46-14.153 1.112.1 2.24.153 3.382.153zM182 93.806c-18.225 0-33-13.208-33-29.5 0-.776.034-1.545.099-2.306C142.407 66.483 138 74.128 138 82.806c0 13.807 11.158 25 24.922 25 9.889 0 18.433-5.779 22.46-14.153-1.112.1-2.24.153-3.382.153z" clip-rule="evenodd" />
</g>
<rect class="domo__mouth" width="250" height="240" x="172" y="155" fill="#D50000" rx="20" />
<g fill="#fff" clip-path="url(#mouth)">
<path d="M172 126h250v39s-27.5 28-31.25 28-27.75-28-31.25-28-27 28-31.25 28-26.75-28-31.25-28-25 28-29 28-29.5-28-33.5-28-26 28-31.25 28S172 165 172 165v-39zM422 421H172v-39s27.5-28 31.25-28 27.75 28 31.25 28 27-28 31.25-28 26.75 28 31.25 28 25-28 29-28 29.5 28 33.5 28 26-28 31.25-28S422 382 422 382v39z" />
<path class="domo__teeth--bottom" d="M172 126h250v39s-27.5 28-31.25 28-27.75-28-31.25-28-27 28-31.25 28-26.75-28-31.25-28-25 28-29 28-29.5-28-33.5-28-26 28-31.25 28S172 165 172 165v-39zM422 421H172v-39s27.5-28 31.25-28 27.75 28 31.25 28 27-28 31.25-28 26.75 28 31.25 28 25-28 29-28 29.5 28 33.5 28 26-28 31.25-28S422 382 422 382v39z" />
</g>
<defs>
<clipPath id="mouth">
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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