Advertisement
loveberry

css bubble text

May 19th, 2023 (edited)
170
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.66 KB | None | 0 0
  1. <style>
  2. .bubbler {
  3. font-size:2em;
  4. font-family:arial;
  5. }
  6. .bubbler mark {
  7. animation: bubble 2s infinite;
  8. animation-timing-function: ease-in-out;
  9. background: none;
  10. color:black;
  11. }
  12.  
  13. .bubbler mark:nth-child(1) { animation-delay:0s; display:inline-block;}
  14. .bubbler mark:nth-child(2) { animation-delay:0.8s; display:inline-block;}
  15. .bubbler mark:nth-child(3) { animation-delay:1.6s; display:inline-block; }
  16. .bubbler mark:nth-child(4) { animation-delay:2.4s; display:inline-block;}
  17. .bubbler mark:nth-child(5) { animation-delay:3.2s; display:inline-block;}
  18. .bubbler mark:nth-child(6) { animation-delay:4s; display:inline-block;}
  19. .bubbler mark:nth-child(7) { animation-delay:4.8s; display:inline-block;}
  20. .bubbler mark:nth-child(8) { animation-delay:5.6s; display:inline-block;}
  21. .bubbler mark:nth-child(9) { animation-delay:6.4s; display:inline-block;}
  22. .bubbler mark:nth-child(10) { animation-delay:7.2s; display:inline-block;}
  23. .bubbler mark:nth-child(11) { animation-delay:8s; display:inline-block;}
  24. .bubbler mark:nth-child(12) { animation-delay:8.8s; display:inline-block;}
  25. .bubbler mark:nth-child(13) { animation-delay:9.6s; display:inline-block;}
  26. .bubbler mark:nth-child(14) { animation-delay:10.4s; display:inline-block;}
  27. .bubbler mark:nth-child(15) { animation-delay:11.2s; display:inline-block;}
  28.  
  29. @keyframes bubble {
  30. from {
  31. color:black;
  32. }
  33.  
  34. 50% {
  35. color:hotpink;
  36. }
  37.  
  38. to {
  39. color:black;
  40. }
  41. }
  42.  
  43. @-webkit-keyframes prin {
  44. from {
  45. color:black;
  46. }
  47.  
  48. 50% {
  49. color:hotpink;
  50. }
  51.  
  52. to {
  53. color:black;
  54. }
  55. }
  56. </style>
  57.  
  58. <div class="bubbler"><mark>l</mark><mark>a</mark><mark>y</mark><mark>e</mark><mark>r</mark><mark>c</mark><mark>a</mark><mark>k</mark><mark>e</mark></div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement