peachygirl

cyberpink bouncy text

Dec 6th, 2021 (edited)
2,744
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.23 KB | None | 0 0
  1. <!--- change the fonts and colors etc also this is postionated as you can see it so delete that part if you don't want it :p ---
  2.  
  3. <style>
  4. @font-face {
  5. font-family:funkhouse;
  6. src: url(https://dl.dropbox.com/s/2bxao21r582gf5d/FUNKHOUS.ttf);
  7. }
  8.  
  9. #yop, .letter {
  10. position: absolute; } /* this is for the position */
  11.  
  12. #yop {
  13. padding: 0.25em;
  14. background: transparent;
  15. z-index: 99;
  16. font-family:funkhouse;
  17. color: #ffd2ea;
  18. -webkit-text-stroke: 0.5px #FFA4D6;
  19. -webkit-filter: drop-shadow(0px 0px 1.5px #FF95CD);
  20. left:9em;
  21. bottom:7.875em;
  22. opacity: 98%;
  23. }
  24.  
  25. .letter {
  26. font-size: 5.75em;
  27. padding: 0.25em;
  28. animation: float 1s linear infinite;
  29. }
  30.  
  31. .first {
  32. left: 0.16em;
  33. }
  34.  
  35. .second {
  36. left: 0.75em;
  37. animation-delay: 0.25s;
  38. }
  39.  
  40. .third {
  41. left: 1em;
  42. animation-delay: 0.15s;
  43. }
  44.  
  45. .fourth {
  46. left: 1.6em;
  47. animation-delay: 0.5s;
  48. }
  49.  
  50. @keyframes float { 0% {
  51. transform: rotate(0) translateY(0); }
  52. 50% { transform: rotate(15deg) translateY(-10px); }
  53. 75% { transform: rotate(-15deg) translateY(0); }
  54. 100% { transform: rotate(0) translateY(0);
  55. }
  56. }
  57.  
  58. </style>
  59. <body>
  60. <div id="yop">
  61. <span class="first letter">K</span><span class="second letter">i</span><span class="third letter">a</span><span class="fourth letter">!</span>
  62. </div>
  63.  
  64.  
Add Comment
Please, Sign In to add comment