Music Card Concept - Pure CSS

HTML
<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>
CSS
body { background: #8e9eab; background: linear-gradient(to left, #8e9eab , #eef2f3); } @keyframes wave { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .music-card { margin: 100px auto; background: #fff; box-shadow: 9px 7px 37px -6px rgba(0,0,0,0.75); overflow: hidden; position: relative; width: 300px; height: 500px; } .image { background: url('http://goo.gl/Ztc4c1') 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 30s infinite linear; } .playing .wave:nth-child(2) { animation-duration: 4000ms; } /* when stop */ .wave:nth-child(2) { animation-duration: 35s; } .playing .wave:nth-child(3) { animation-duration: 5000ms; } /* when stop */ .wave:nth-child(3) { animation-duration: 40s; } .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; } .fa { position: absolute; bottom: 10px; right: 10px; font-size: 18px; cursor: pointer; color: #555; } .fa-play { display: none; }
JAVASCRIPT
var audio = new Audio('https://a.clyp.it/dumevvze.mp3'); audio.volume = 0.1; audio.play(); $('.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'); } });
Expand for more options Login