vue+tone+chance实现音乐泡泡排序动画弹奏效果代码
代码语言：html
所属分类：多媒体
代码描述：vue+tone+chance实现音乐泡泡排序动画弹奏效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.15.3.css">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,700|Permanent+Marker" rel="stylesheet">
<style>
html, body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1 {
margin: 0;
padding: 0;
}
button {
margin: 0;
padding: 0;
border: none;
background-color: transparent;
color: white;
cursor: pointer;
}
i.fa-redo-alt {
font-size: 1.5rem;
margin-left: 1rem;
}
.toast {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 50px;
background-color: green;
color: white;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border-radius: 5px;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
min-height: 100vh;
align-content: flex-start;
background: #193073;
color: white;
}
.main {
margin-top: 2rem;
margin-bottom: 2rem;
display: flex;
flex-wrap: wrap;
font-family: 'IBM Plex Sans', sans-serif;
background: #22293c;
box-shadow: 8px 8px 10px 2px rgba(0, 0, 0, 0.3);
border-radius: 5px;
width: 700px;
padding: 2rem;
position: relative;
}
.title {
flex: 0 1 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1rem;
margin-bottom: 3rem;
font-size: 1.5rem;
text-transform: uppercase;
}
.graph {
flex: 0 1 100%;
display: flex;
justify-content: center;
align-items: flex-end;
}
.graph__bars {
display: flex;
align-items: flex-end;
}
.graph__bar {
background-color: #193073;
color: white;
height: 20px;
width: 50px;
transition: transform .5s, opacity .1s;
margin-right: 10px;
display: flex;
justify-content: center;
align-items: flex-end;
opacity: .5;
position: relative;
}
.graph__bar.active {
opacity: 1;
}
.graph__bar.checking {
opacity: 1;
}
.graph__bar.complete {
background-color: green !important;
opacity: 1;
}
.graph__randomize {
color: red;
}
.graph__randomize button {
transition: opacity .1s;
}
.graph__randomize button:disabled {
opacity: 0.5;
cursor: initial;
}
.bass {
flex: 0 1 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 2rem;
}
.bass__title {
font-size: 1.3rem;
flex: 0 1 100%;
font-weight: bold;
text-align: center;
margin-bottom: 1rem;
}
.bass__notes {
display: flex;
flex: 0;
}
.bass__box {
width: 20px;
margin-left: 15px;
height: 20px;
background-color: #F21DE4;
opacity: .2;
cursor: pointer;
position: relative;
}
.bass__box.active {
opacity: .7;
}
.bass__box label {
width: 100%;
height: 100%;
position: absolute;
cursor: pointer;
}
.bass__box input {
display: none;
}
.bass__randomize {
margin-left: 10px;
}
.begin {
flex: 0 1 100%;
text-align: center;
margin-top: 2rem;
text-transform: uppercase;
}
.begin button {
background-color: #193073;
padding: 1rem 3rem;
border-radius: 2px;
font-weight: bold;
font-size: 1.5rem;
cursor: pointer;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
.info-header {
flex: 0 1 100%;
margin-top: 1.5rem;
margin-bottom: 1rem;
text-align: center;
font-weight: bold;
font-size: 1.5rem;
}
.controls {
flex: 0 1 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 2rem;
background: #343f5d;
padding: 0 3.2rem;
padding-right: 2rem;
padding-bottom: 2rem;
border-radius: 5px;
position: relative;
}
.controls__key-title {
text-transform: uppercase;
font-weight: bold;
margin-bottom: 5px;
text-decoration: underline;
}
.controls__tempo {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
}
.controls__tempo-title {
flex: 0 1 100%;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 5px;
text-decoration: underline;
}
.controls__tempo label {
margin-left: 8px;
}
.controls__seed-title {
flex: 0 1 100%;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 10px;
text-decoration: underline;
}
.controls__seed-buttons {
display: flex;
margin-top: 10px;
}
.controls__seed-buttons button {
background-color: #193073;
text-transform: uppercase;
font-size: .9rem;
padding: 5px 10px;
margin-right: 10px;
border-radius: 2px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}
.controls__data {
flex: 0 1 50%;
}
.controls__saved-seeds {
flex: 0 1 50%;
}
.controls__saved-seeds-title {
flex: 0 1 100%;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 10px;
text-decoration: underline;
}
.controls__saved-seeds-seed {
cursor: pointer;
}
.controls__saved-seeds button {
background-color: #193073;
text-transform: uppercase;
font-size: .9rem;
padding: 5px 10px;
margin-right: 10px;
border-radius: 2px;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}
.pop-down-enter-active, .pop-down-leave-active {
transition: all .3s;
}
.pop-down-enter, .pop-down-leave-to {
opacity: 0;
transform: translateY(-10px);
}
.list-complete-enter, .list-complete-leave-to
{
opacity: 0;
transform: translateY(30px);
}
.list-complete-leave-active {
position: absolute;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<div class="main">
<div class="title">
<h1>Musical Bubble Sort</h1>
</div>
<div class="graph">
<transition-group name="list-complete" tag="div" class="graph__bars">
<item v-for="(num,i) in unsorted" :num="num" :music="music" :modearray="modeArray" :key="num" :class="arrayClass(i)" :ref="num" class="graph__bar" />
</transition-group>
<div class="graph__randomize">
<button @click="randomize" :disabled="!controls"><i class="fas fa-redo-alt"></i></button>
</div>
</div>
<div class="bass">
<div class="bass__title">
Bass Pattern
</div>
<div class="bass__notes">
<div v-for="(note, i) in music.bassPattern" class="bass__box" :class="{'active' : note}" ref="bass">
<label :for="`box-${i}`">
<input type="checkbox" v-model="music.bassPattern[i]" :id="`box-${i}`">
</label>
</div>
</div>
<div class="bass__randomize">
<button @click="randomizeBassLoop"><i class="fas fa-redo-alt"></i></button>
</div>
</div>
<div class="begin">
<button @click="beginSort">
<span v-if="controls">开始</span>
<span v-else>停止 & 重置</span>
</button>
</div>
<div class="controls">
<transition name="pop-down">
<div class="toast" key="toast" v-show="toastActive" ref="toast">
{{toastMessage}}
</div>
</transition>
<div class="info-header">
控制
</div>
<div class="controls__data">
<div class="controls__key">
<div class="controls__key-title">
Key
</div>
<select name="" id="" v-model="music.key" :disabled="!controls">
<option value="C">C</option>
<option value="C#">C#</option>
<option value="D">D</option>
<option value="D#">D#</option>
<option value="E">E</option>
<option value="F">F</option>
<option value="F#">F#</option>
<option value="G">G</option>
<option value="G#">G#</option>
<option value="A">A</option>
<option value="A#">A#</option>
<option value="B">B</option>
</select>
<select name="" id="" v-model="music.mode" :disabled="!controls">
<option value="M">Major</option>
<option value="m">Minor</option>
<option value="L">Locrian (caution: spooky!)</option>
</select>
</div>
<div class="controls__tempo">
<div class="controls__tempo-title">
时间
</div>
<input type="range" id=tempo min="0" max="200" v-model.number="music.tempo" :disabled="!controls">
<label for="tempo">{{music.tempo}}</label>
</div>
<div class="controls__seed">
<div class="controls__seed-title">
种子
</div>
<input type="text" id="seed" ref="seed" @keydown="handleSeedInput" v-model="seed" @click="selectSeedBox">
<div class="controls__seed-buttons">
<button @click="setSeed($refs.seed.value)">设置</button>
<button @click="copySeed">复制</button>
<button @click="saveSeed".........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
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