milkandcookies

twinkle jump bouncing heart slideshow

Sep 19th, 2021 (edited)
3,614
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.38 KB | None | 0 0
  1. <style>
  2. .slideshow, .slideshow > img {
  3. -webkit-mask-image: url(https://i.imgur.com/bIX4M8u.png);
  4. -webkit-mask-size: 100%;
  5. -webkit-mask-repeat: no-repeat;
  6. -webkit-mask-position: center;
  7. }
  8.  
  9. .slideshow {
  10. top: 1em;
  11. right: 3em;
  12. width: 7.25em;
  13. height: 7.25em;
  14. animation: bounce-rotate 2s infinite;
  15. animation-timing-function: cubic-bezier(1, 0.35, 0.09, 0.85);
  16. }
  17.  
  18. .mySlides {display:none;}
  19.  
  20. @keyframes bounce-rotate {
  21. 0% { transform: rotate(0) translateY(0); }
  22. 25% { transform: rotate(-25deg) translateY(-10em); }
  23. 50% { transform: rotateY(150deg)
  24. translateY(-10em); }
  25. 75% { transform: rotateY(0)
  26. translateY(-13em); }
  27. 100% { transform: rotateY(0) translateY(4em); }
  28. }
  29. </style>
  30.  
  31. <body>
  32.  
  33. <div class="slideshow" style="position:absolute">
  34.  
  35. <img class="mySlides" src="https://dl.dropbox.com/s/emkxdiki357lohi/776FF589-CA7F-4FE9-9EAA-D1193FFD23EF.gif" style="width:100%">
  36.  
  37. <img class="mySlides" src="https://dl.dropbox.com/s/dv6573yel1adq0f/D30CEB0E-CE6E-4C0F-8E1B-EC08851F6F45.gif" style="width:100%">
  38.  
  39. </div>
  40.  
  41. <script>
  42. var myIndex = 0;
  43. carousel();
  44.  
  45. function carousel() {
  46. var i;
  47. var x = document.getElementsByClassName("mySlides");
  48. for (i = 0; i < x.length; i++) {
  49. x[i].style.display = "none";
  50. }
  51. myIndex++;
  52. if (myIndex > x.length) {myIndex = 1}
  53. x[myIndex-1].style.display = "block";
  54. setTimeout(carousel, 2000); // Change image every 2 seconds
  55. }
  56. </script>
  57.  
  58. </body>
Add Comment
Please, Sign In to add comment