easyaudioeffects实现html音频声音特效代码
代码语言：html
所属分类：多媒体
代码描述：easyaudioeffects实现html音频声音特效代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFW NEW PAGE</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.easyaudioeffects.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
body {
padding: 100px;
}
.sound-trigger--type-default.sound-trigger {
display: inline-block;
width: 100px;
height: 100px;
position: relative;
margin: 10px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
-ms-border-radius: 100px;
-o-border-radius: 100px;
border-radius: 100px;
}
.sound-trigger--type-default.sound-trigger:after {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 48;
width: 100%;
height: 100%;
background-color: rgba(105, 103, 202, 0.2);
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
-ms-border-radius: 100px;
-o-border-radius: 100px;
border-radius: 100px;
}
.sound-trigger--type-default.sound-trigger--type-hover:hover:after {
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-ms-transform: scale(1.25);
-o-transform: scale(1.25);
transform: scale(1.25);
}
.sound-trigger--type-default.sound-trigger--type-hover .sound-trigger__inner:hover {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
background-color: rgba(105, 103, 202, 0.5);
vertical-align: middle;
}
.sound-trigger--type-default.sound-trigger--type-hover .sound-trigger__inner:hover i {
text-shadow: none;
}
.sound-trigger--type-default.sound-trigger--type-hover .sound-trigger__inner:hover img {
vertical-align: middle;
}
.sound-trigger--type-default.sound-trigger--type-hover .sound-trigger__speach {
-webkit-animation: motion__hover 2s ease 0s infinite alternate;
-moz-animation: motion__hover 2s ease 0s infinite alternate;
-ms-animation: motion__hover 2s ease 0s infinite alternate;
-o-animation: motion__hover 2s ease 0s infinite alternate;
animation: motion__hover 2s ease 0s infinite alternate;
}
.sound-trigger--type-default.sound-trigger--type-click:active:after {
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-ms-transform: scale(1.25);
-o-transform: scale(1.25);
transform: scale(1.25);
}
.sound-trigger--type-default.sound-trigger--type-click .sound-trigger__inner:active {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
background-color: rgba(105, 103, 202, 0.5);
}
.sound-trigger--type-default.sound-trigger--type-click .sound-trigger__inner:active i {
text-shadow: none;
}
.sound-trigger--type-default.sound-trigger--type-click .sound-trigger__speach {
-webkit-animation: motion__click 1s ease 0s infinite;
-moz-animation: motion__click 1s ease 0s infinite;
-ms-animation: motion__click 1s ease 0s infinite;
-o-animation: motion__click 1s ease 0s infinite;
animation: motion__click 1s ease 0s infinite;
}
.sound-trigger--type-default .sound-trigger__inner {
width: 100%;
height: 100%;
overflow: hidden;
text-align: center;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
-ms-border-radius: 100px;
-o-border-radius: 100px;
border-radius: 100px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
background-color: #6967ca;
color: #ececf5;
cursor: pointer;
position: relative;
z-index: 50;
}
.sound-trigger--type-default .sound-trigger__inner i {
font-size: 40px;
line-height: 100px;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
text-shadow: 0px 0px 0 #625fc7,1px 1px 0 #625fc7,2px 2px 0 #625fc7,3px 3px 0 #625fc7,4px 4px 0 #625fc7,5px 5px 0 #625fc7,6px 6px 0 #625fc7,7px 7px 0 #625fc7,8px 8px 0 #625fc7,9px 9px 0 #625fc7,10px 10px 0 #625fc7,11px 11px 0 #625fc7,12px 12px 0 #625fc7,13px 13px 0 #625fc7,14px 14px 0 #625fc7,15px 15px 0 #625fc7,16px 16px 0 #625fc7,17px 17px 0 #625fc7,18px 18px 0 #625fc7,19px 19px 0 #625fc7,20px 20px 0 #625fc7,21px 21px 0 #625fc7,22px 22px 0 #625fc7,23px 23px 0 #625fc7,24px 24px 0 #625fc7,25px 25px 0 #625fc7,26px 26px 0 #625fc7,27px 27px 0 #625fc7,28px 28px 0 #625fc7,29px 29px 0 #625fc7,30px 30px 0 #625fc7,31px 31px 0 #625fc7,32px 32px 0 #625fc7,33px 33px 0 #625fc7,34px 34px 0 #625fc7,35px 35px 0 #625fc7,36px 36px 0 #625fc7,37px 37px 0 #625fc7,38px 38px 0 #625fc7,39px 39px 0 #625fc7,40px 40px 0 #625fc7,41px 41px 0 #625fc7,42px 42px 0 #625fc7,43px 43px 0 #625fc7,45px 45px 0 transparent;
}
.sound-trigger--type-default .sound-trigger__speach {
position: absolute;
z-index: 60;
width: 100%;
background-color: #5b5f7c;
color: #ececf5;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
font-size: 14rem;
top: -3em;
left: 0;
text-align: center;
}
.sound-trigger--type-default .sound-trigger__speach:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: #5b5f7c;
border-width: 4px;
margin-left: -4px;
}
.sound-trigger--type-default-2.sound-trigger {
display: inline-block;
width: 100px;
height: 100px;
position: relative;
margin: 10px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
-ms-border-radius: 100px;
-o-border-radius: 100px;
border-radius: 100px;
}
.sound-trigger--type-default-2.sound-trigger:after {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 48;
width: 100%;
height: 100%;
background-color: rgba(100, 218, 194, 0.2);
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
-ms-border-radius: 100px;
-o-border-radius: 100px;
border-radius: 100px;
}
.sound-trigger--type-default-2.sound-trigger--type-hover:hover:after {
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-ms-transform: scale(1.25);
-o-transform: scale(1.25);
transform: scale(1.25);
}
.sound-trigger--type-default-2.sound-trigger--type-hover .sound-trigger__inner:hover {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
background-color: rgba(100, 218, 194, 0.5);
vertical-align: middle;
}
.sound-trigger--type-default-2.sound-trigger--type-hover .sound-trigger__inner:hover i {
text-shadow: none;
}
.sound-trigger--type-default-2.sound-trigger--type-hover .sound-trigger__inner:hover img {
vertical-align: middle;
}
.sound-trigger--type-default-2.sound-trigger--type-hover .sound-trigger__speach {
-webkit-animation: motion__hover 2s ease 0s infinite alternate;
-moz-animation: motion__hover 2s ease 0s infinite alternate;
-ms-animation: motion__hover 2s ease 0s infinite alternate;
-o-animation: motion__hover 2s ease 0s infinite alternate;
animation: motion__hover 2s ease 0s infinite alternate;
}
.sound-trigger--type-default-2.sound-trigger--type-click:active:after {
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-ms-transform: scale(1.25);
-o-transform: scale(1.25);
transform: scale(1.25);
}
.sound-trigger--type-default-2.sound-trigger--type-click .sound-trigger__inner:active {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
background-color: rgba(100, 218, 194, 0.5);
}
.sound-trigger--type-default-2.sound-trigger--type-click .sound-trigger__inner:active i {
text-shadow: none;
}
.sound-trigger--type-default-2.sound-trigger--type-click .sound-trigger__speach {
-webkit-animation: motion__click 1s ease 0s infinite;
-moz-animation: motion__click 1s ease 0s infinite;
-ms-animation: motion__click 1s ease 0s infinite;
-o-animation: motion__click 1s ease 0s infinite;
animation: motion__click 1s ease 0s infinite;
}
.sound-trigger--type-default-2 .sound-trigger__inner {
width: 100%;
height: 100%;
overflow: hidden;
text-align: center;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
-ms-border-radius: 100px;
-o-border-radius: 100px;
border-radius: 100px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
background-color: #64dac2;
color: #ececf5;
cursor: pointer;
position: relative;
z-index: 50;
}
.sound-trigger--type-default-2 .sound-trigger__inner i {
font-size: 40px;
line-height: 100px;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
text-shadow: 0px 0px 0 #5cd8bf,1px 1px 0 #5cd8bf,2px 2px 0 #5cd8bf,3px 3px 0 #5cd8bf,4px 4px 0 #5cd8bf,5px 5px 0 #5cd8bf,6px 6px 0 #5cd8bf,7px 7px 0 #5cd8bf,8px 8px 0 #5cd8bf,9px 9px 0 #5cd8bf,10px 10px 0 #5cd8bf,11px 11px 0 #5cd8bf,12px 12px 0 #5cd8bf,13px 13px 0 #5cd8bf,14px 14px 0 #5cd8bf,15px 15px 0 #5cd8bf,16px 16px 0 #5cd8bf,17px 17px 0 #5cd8bf,18px 18px 0 #5cd8bf,19px 19px 0 #5cd8bf,20px 20px 0 #5cd8bf,21px 21px 0 #5cd8bf,22px 22px 0 #5cd8bf,23px 23px 0 #5cd8bf,24px 24px 0 #5cd8bf,25px 25px 0 #5cd8bf,26px 26px 0 #5cd8bf,27px 27px 0 #5cd8bf,28px 28px 0 #5cd8bf,29px 29px 0 #5cd8bf,30px 30px 0 #5cd8bf,31px 31px 0 #5cd8bf,32px 32px 0 #5cd8bf,33px 33px 0 #5cd8bf,34px 34px 0 #5cd8bf,35px 35px 0 #5cd8bf,36px 36px 0 #5cd8bf,37px 37px 0 #5cd8bf,38px 38px 0 #5cd8bf,39px 39px 0 #5cd8bf,40px 40px 0 #5cd8bf,41px 41px 0 #5cd8bf,42px 42px 0 #5cd8bf,43px 43px 0 #5cd8bf,45px 45px 0 transparent;
}
.sound-trigger--type-default-2 .sound-trigger__speach {
position: absolute;
z-index: 60;
width: 100%;
background-color: #5b5f7c;
color: #ececf5;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
font-size: 14rem;
top: -3em;
left: 0;
text-align: center;
}
.sound-trigger--type-default-2 .sound-trigger__speach:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: #5b5f7c;
border-width: 4px;
margin-left: -4px;
}
.sound-trigger--type-small.sound-trigger {
display: inline-block;
width: 50px;
height: 50px;
position: relative;
margin: 5px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
}
.sound-trigger--type-small.sound-trigger:after {
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 48;
width: 100%;
height: 100%;
background-color: rgba(105, 103, 202, 0.2);
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
}
.sound-trigger--type-small.sound-trigger--type-hover:hover:after {
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-ms-transform: scale(1.25);
-o-transform: scale(1.25);
transform: scale(1.25);
}
.sound-trigger--type-small.sound-trigger--type-hover .sound-trigger__inner:hover {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
background-color: rgba(105, 103, 202, 0.5);
vertical-align: middle;
}
.sound-trigger--type-small.sound-trigger--type-hover .sound-trigger__inner:hover i {
text-shadow: none;
}
.sound-trigger--type-small.sound-trigger--type-hover .sound-trigger__inner:hover img {
vertical-align: middle;
}
.sound-trigger--type-small.sound-trigger--type-hover .sound-trigger__speach {
-webkit-animation: motion__hover 2s ease 0s infinite alternate;
-moz-animation: motion__hover 2s ease 0s infinite alternate;
-ms-animation: motion__hover 2s ease 0s infinite alternate;
-o-animation: motion__hover 2s ease 0s infinite alternate;
animation: motion__hover 2s ease 0s infinite alternate;
}
.sound-trigger--type-small.sound-trigger--type-click:active:after {
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-ms-transform: scale(1.25);
-o-transform: scale(1.25);
transform: scale(1.25);
}
.sound-trigger--type-small.sound-trigger--type-click .sound-trigger__inner:active {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
background-color: rgba(105, 103, 202, 0.5);
}
.sound-trigger--type-small.sound-trigger--type-click .sound-trigger__inner:active i {
text-shadow: none;
}
.sound-trigger--type-small.sound-trigger--type-click .sound-trigger__speach {
-webkit-animation: motion__click 1s ease 0s infinite;
-moz-animation: motion__click 1s ease 0s infinite;
-ms-animation: motion__click 1s ease 0s infinite;
-o-animation: motion__click 1s eas.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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