Advertisement
peachygirl

hover on text music player

Dec 2nd, 2021
2,874
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 0.90 KB | None | 0 0
  1. <!--- work for both pro plus and standard--->
  2.  
  3. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
  4.  
  5. <style>
  6. @font-face {
  7. font-family: excelorate;
  8. src: url(https://dl.dropbox.com/s/f7hw8i3g3poiyp3/excelorate-font.otf);
  9. }
  10.  
  11.  
  12. #text01 { /*it can be another text id, but you'll have to change the code above where it says text01*/
  13. font-family: excelorate;
  14. -webkit-text-stroke: 1px #000;
  15. -webkit-filter: drop-shadow(0px 0px 2px #ddd);
  16. color: white;
  17. }
  18. </style>
  19.  
  20. <div id="text01">hola</div>
  21.  
  22. <audio id="audio" src="https://dl.dropbox.com/s/jbp06eplbfu8q26/%EB%93%A4%EB%B6%88%20wildfire.mp3"></audio>
  23.  
  24.  
  25.  
  26. <script>
  27. document.getElementById('text01').addEventListener('click', function (e) {
  28. e.preventDefault();
  29. document.getElementById('audio').play();document.getElementById('text01').className = 'animate__animated animate__bounce';
  30. });
  31. </script>
  32.  
  33.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement