Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
- <style>
- #music-player {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 2.15em;
- width: 2.15em;
- font-size: 1.5em;
- padding: 0.125em;
- border-radius: 50%;
- border: 1px solid #fff;
- background: rgb(255,255,255);
- background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,211,212,1) 100%);
- -webkit-filter: drop-shadow(0px 0px 1.5px #F6C8CA);
- position: absolute;
- top: 1em;
- left: 1em;
- z-index: 40;
- -webkit-animation: spin 4s linear infinite;
- -moz-animation: spin 4s linear infinite;
- animation: spin 4s linear infinite;
- }
- @-moz-keyframes spin {
- 100% {
- -moz-transform: rotate(360deg);
- }
- }
- @-webkit-keyframes spin {
- 100% {
- -webkit-transform: rotate(360deg);
- }
- }
- @keyframes spin {
- 100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
- #music-player:hover {
- -webkit-animation: pop 0.3s ease;
- }
- </style>
- <div id="music-player">
- <i class="material-icons" style="font-size: 1.3em; color: #fff; -webkit-text-stroke: 0.5px #ffd1eb;"> headset
- </i>
- </div>
- <audio id="audio" src="https://dl.dropbox.com/scl/fi/8nyngq0cabh1vzdo25n88/Wonder-Girls-Tell-Me-Color-Coded-Lyrics-Han_Rom_Eng-tjGu6L9HL2E.mp3?rlkey=csw36hgonn3h1ar577u3v6hs3&st=pdznwmz4">
- </audio>
- <script>
- document.getElementById("music-player").onclick = function() {
- var audio = document.getElementById("audio");
- if (audio.paused) audio.play();
- else audio.pause();
- };
- </script>
Add Comment
Please, Sign In to add comment
