Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <head>
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
- </head>
- <style>
- #musicplayer{
- display:grid;
- grid-template-columns:20px auto;
- align-items:center;
- width: 200px;
- font-size:20px;
- line-height:140%;
- background:white;
- border: 1px solid black;
- }
- #musictitle{
- overflow: hidden;
- white-space: nowrap;
- display:inline-block;
- width: calc(100% - 10px - 1px);
- margin-left: calc(10px + 1px);
- }
- #musicpixel{
- width:100%;
- padding:5px;
- position:relative;
- min-height: 20px;
- background:white;
- border-right: 1px solid black;
- }
- .overlay {
- opacity:0;
- position:absolute;
- top:0;
- left:0;
- text-align:center;
- width:100%;
- height:100%;
- transition:0.3s ease;
- background:white;
- }
- #musicplayer:hover .overlay {
- opacity: 1;
- transition:0.3s ease;
- }
- .playpause{
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
- .playpause:hover{
- cursor:help;
- }
- #musicpixel img{
- display:block;
- }
- .marquee{
- display: inline-block;
- padding-left: 100%;
- animation: marquee 5s linear infinite;
- }
- @keyframes marquee{
- 0% {
- transform: translate(0, 0);
- }
- 100% {
- transform: translate(-100%, 0);
- }
- }
- </style>
- <div id='musicplayer'>
- <div id='musicpixel'>
- <img src='https://64.media.tumblr.com/4b8b5edeb93a938b40814b1dd867833c/tumblr_inline_msbtvcHwwB1rkldve.gif'>
- <div class='overlay'>
- <div class='playpause'><i class="fas fa-play"></i></div>
- </div>
- </div>
- <div id='musictitle'>
- <span class='marquee'>windy summer cr ramdons</span>
- </div>
- </div>
- <audio id='musicsrc' loop src='https://dl.dropbox.com/s/66c6ocz8rniwpqm/Anri%20-%20Windy%20Summer.mp3'></audio>
- <script>
- document.querySelector('.playpause').addEventListener('click', playpause);
- function playpause(){
- if(document.querySelector('.playpause').innerHTML == '<i class="fas fa-play"></i>'){
- document.querySelector('#musicsrc').play();
- document.querySelector('.playpause').innerHTML = '<i class="fas fa-pause"></i>';
- } else{
- document.querySelector('#musicsrc').pause();
- document.querySelector('.playpause').innerHTML = '<i class="fas fa-play"></i>';
- }
- }
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement