TANMOY1

Happy Customers | 7 Days Return

Oct 9th, 2025
3,242
-1
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.05 KB | None | 0 1
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Sliding Text with Star</title>
  7. <style>
  8. .sliding-text-container {
  9. position: relative;
  10. overflow: hidden;
  11. height: 16px; /* Height of the block */
  12. margin-bottom: 5px; /* Margin for spacing */
  13. }
  14.  
  15. .sliding-text {
  16. position: absolute;
  17. opacity: 0; /* Ensure text is hidden initially */
  18. font-size: 12px; /* Font size of the text */
  19. color: #333; /* Text color */
  20. left: 0; /* Align text to the left */
  21. width: 100%; /* Ensure text does not wrap */
  22. display: flex; /* To align star and text */
  23. align-items: center; /* Center align the star and text vertically */
  24. line-height: 16px; /* Match the height of the container to vertically center */
  25. }
  26.  
  27. .sliding-text::before {
  28. content: "★"; /* Adds a star before the text */
  29. color: #FFD700; /* Set star color to a gold-like color */
  30. margin-right: 4px; /* Space between the star and the text */
  31. opacity: 1; /* Keep the star fully visible */
  32. }
  33.  
  34. @keyframes slideInFadeOut {
  35. 0% {
  36. opacity: 0;
  37. transform: translateY(30px);
  38. }
  39. 10% {
  40. opacity: 1;
  41. transform: translateY(0);
  42. }
  43. 50% {
  44. opacity: 1;
  45. transform: translateY(0);
  46. }
  47. 60% {
  48. opacity: 0;
  49. transform: translateY(-30px);
  50. }
  51. 100% {
  52. opacity: 0;
  53. }
  54. }
  55.  
  56. .sliding-text:nth-child(1) {
  57. animation: slideInFadeOut 6s ease-in-out infinite;
  58. animation-delay: 0s;
  59. }
  60.  
  61. .sliding-text:nth-child(2) {
  62. animation: slideInFadeOut 6s ease-in-out infinite;
  63. animation-delay: 3s; /* Adjusted to start right after the first text */
  64. }
  65. </style>
  66. </head>
  67. <body>
  68. <div class="sliding-text-container">
  69. <div class="sliding-text">7 Days Return</div>
  70. <div class="sliding-text">1800+ Happy Customers</div>
  71. </div>
  72. </body>
  73. </html>
Advertisement
Add Comment
Please, Sign In to add comment