<div class='music-card playing'>
<div class='image'></div>
<div class='wave'></div>
<div class='wave'></div>
<div class='wave'></div>
<div class='info'>
<h2 class='title'>Anomaly</h2>
<div class='artist'>Lecrae</div>
</div>
<i class="fa fa-pause trigger" aria-hidden="true"></i>
<i class="fa fa-play trigger" aria-hidden="true"></i>
</div>
@import 'https://fonts.googleapis.com/css?family=Reem+Kufi';
body {
background: #fff;
}
@keyframes wave {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.music-card {
margin: 100px auto;
background: #fff;
box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.45);
overflow: hidden;
position: relative;
width: 300px;
height: 500px;
border-radius: 6px;
}
.image {
background: url('http://static1.squarespace.com/static/530b728de4b04fc9b23a5988/t/569880381a5203aa7d44c1a8/1452834873397/00.jpg?format=1000w') no-repeat 75%;
background-size: cover;
position: absolute;
z-index: 1;
opacity: 0.3;
height: 300px;
width: 300px;
}
.image:after {
height: 100px;
content: '';
top: 200px;
position: absolute;
width: 100%;
z-index: 1;
background: linear-gradient(rgba(9, 2, 4, 0), #444);
}
.wave {
position: absolute;
height: 750px;
width: 750px;
opacity: 0.6;
left: 0;
top: 0;
margin-left: -70%;
margin-top: -130%;
background: radial-gradient(#353535, #383737);
}
.wave:nth-child(2),
.wave:nth-child(3) {
top: 10px;
}
.playing .wave {
border-radius: 40%;
animation: wave 3000ms infinite linear;
}
/* when stop */
.wave {
border-radius: 40%;
animation: wave 55s infinite linear;
}
.playing .wave:nth-child(2) {
animation-duration: 4000ms;
}
/* when stop */
.wave:nth-child(2) {
animation-duration: 50s;
}
.playing .wave:nth-child(3) {
animation-duration: 5000ms;
}
/* when stop */
.wave:nth-child(3) {
animation-duration: 45s;
}
.info {
position: absolute;
bottom: 20px;
left: 0;
right: 0;
text-align: center;
}
.title {
font-size: 1.4em;
font-weight: 400;
color: #333;
margin-bottom: 8px;
text-transform: uppercase;
font-family: 'Reem Kufi', sans-serif;
}
.artist {
color: #cfcfcf;
font-size: 1.2em;
letter-spacing: 0.08em;
font-family: 'Reem Kufi', sans-serif;
margin-top: -10px;
}
.fa {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 18px;
cursor: pointer;
color: #555;
}
.fa-play {
display: none;
}
var audio = new Audio('https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/Lecrae_-_Anomaly_(Lyric_Video).mp3');
audio.volume = 0.1;
audio.autoplay = true;
$('.trigger').click(function() {
if (audio.paused == false) {
audio.pause();
$('.fa-play').show();
$('.fa-pause').hide();
$('.music-card').removeClass('playing');
} else {
audio.play();
$('.fa-pause').show();
$('.fa-play').hide();
$('.music-card').addClass('playing');
}
});
