Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Sliding Text with Star</title>
- <style>
- .sliding-text-container {
- position: relative;
- overflow: hidden;
- height: 16px; /* Height of the block */
- margin-bottom: 5px; /* Margin for spacing */
- }
- .sliding-text {
- position: absolute;
- opacity: 0; /* Ensure text is hidden initially */
- font-size: 12px; /* Font size of the text */
- color: #333; /* Text color */
- left: 0; /* Align text to the left */
- width: 100%; /* Ensure text does not wrap */
- display: flex; /* To align star and text */
- align-items: center; /* Center align the star and text vertically */
- line-height: 16px; /* Match the height of the container to vertically center */
- }
- .sliding-text::before {
- content: "★"; /* Adds a star before the text */
- color: #FFD700; /* Set star color to a gold-like color */
- margin-right: 4px; /* Space between the star and the text */
- opacity: 1; /* Keep the star fully visible */
- }
- @keyframes slideInFadeOut {
- 0% {
- opacity: 0;
- transform: translateY(30px);
- }
- 10% {
- opacity: 1;
- transform: translateY(0);
- }
- 50% {
- opacity: 1;
- transform: translateY(0);
- }
- 60% {
- opacity: 0;
- transform: translateY(-30px);
- }
- 100% {
- opacity: 0;
- }
- }
- .sliding-text:nth-child(1) {
- animation: slideInFadeOut 6s ease-in-out infinite;
- animation-delay: 0s;
- }
- .sliding-text:nth-child(2) {
- animation: slideInFadeOut 6s ease-in-out infinite;
- animation-delay: 3s; /* Adjusted to start right after the first text */
- }
- </style>
- </head>
- <body>
- <div class="sliding-text-container">
- <div class="sliding-text">7 Days Return</div>
- <div class="sliding-text">1800+ Happy Customers</div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment