mirror of
https://github.com/koel/koel
synced 2024-12-21 18:13:13 +00:00
85 lines
2.6 KiB
Vue
85 lines
2.6 KiB
Vue
<template>
|
|
<div id="bars">
|
|
<div class="bar" v-for="n in 5"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
// Since we don't have anything here, let us sing a song instead.
|
|
//
|
|
// "The House Of The Rising Sun"
|
|
// -- by The Animals
|
|
//
|
|
// There is a house in New Orleans
|
|
// They call the Rising Sun
|
|
// And it's been the ruin of many a poor boy
|
|
// And God, I know I'm one
|
|
//
|
|
// My mother was a tailor
|
|
// She sewed my new blue jeans
|
|
// My father was a gamblin' man
|
|
// Down in New Orleans
|
|
//
|
|
// Now the only thing a gambler needs
|
|
// Is a suitcase and trunk
|
|
// And the only time he's satisfied
|
|
// Is when he's on a drunk
|
|
//
|
|
// [Organ Solo]
|
|
//
|
|
// Oh mother, tell your children
|
|
// Not to do what I have done
|
|
// Spend your lives in sin and misery
|
|
// In the House of the Rising Sun
|
|
//
|
|
// Well, I got one foot on the platform
|
|
// The other foot on the train
|
|
// I'm goin' back to New Orleans
|
|
// To wear that ball and chain
|
|
//
|
|
// Well, there is a house in New Orleans
|
|
// They call the Rising Sun
|
|
// And it's been the ruin of many a poor boy
|
|
// And God, I know I'm one.
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass">
|
|
// Some fancy bars for an eye-candy effect.
|
|
// Credits: http://codepen.io/johnheiner/pen/JdRybK and http://codepen.io/jackrugile/pres/CkAbG
|
|
@keyframes sound {
|
|
0% {
|
|
opacity: .15;
|
|
height: 1px;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
height: 13px;
|
|
}
|
|
}
|
|
|
|
#bars {
|
|
width: 28px;
|
|
height: 13px;
|
|
position: relative;
|
|
display: inline-block;
|
|
backface-visibility: hidden;
|
|
|
|
.bar {
|
|
background: #666;
|
|
bottom: 1px;
|
|
position: absolute;
|
|
width: 3px;
|
|
animation: sound 0ms -800ms linear infinite alternate;
|
|
backface-visibility: hidden;
|
|
will-change: opacity, height;
|
|
}
|
|
|
|
.bar:nth-child(1) { left: 1px; background: #754fa0; animation-duration: 474ms; }
|
|
.bar:nth-child(2) { left: 5px; background: #09b7bf; animation-duration: 433ms; }
|
|
.bar:nth-child(3) { left: 9px; background: #90d36b; animation-duration: 407ms; }
|
|
.bar:nth-child(4) { left: 13px; background: #ed1b72; animation-duration: 458ms; }
|
|
.bar:nth-child(5) { left: 17px; background: #f2d40d; animation-duration: 400ms; }
|
|
}
|
|
</style>
|