DragonaFlooring Posted March 24, 2023 Share Posted March 24, 2023 hello, https://www.dragonaflooring.ca/ I have attached an Image, I want crazy deals in the header element to be highlighted and blink. i have created a CSS code but its not working their is some error in the code. Can you please help me with this? here's the code, thanks in advance. <!DOCTYPE html> <html lang="en"> <head> <title>Blinking Text</title> <style> body { margin: 0; padding: 0; } div{ position: absolute; top: 0%; left: 0%; transform: translate(-0%, -0%); } h2 { color: #008000; text-align: center; animation: animate 1.5s linear infinite; } @keyframes animate { 0% { opacity: 0; } 50% { opacity: 0.7; } 100% { opacity: 0; } } { header-nav-item header-nav-item--collection { </style> </head> <body> <div> <h2>CRAZY DEALS</h2> </div> </body> </html> Link to comment
Mark.Hook Posted March 24, 2023 Share Posted March 24, 2023 Try plugging this into your custom css and see if it works for you... /* This controls color and blink speed on desktop */ .header-nav a[href*="crazy-deals"] { color: yellow; animation: blinker 1s linear infinite; } /* This controls color and blink speed on mobile */ .header-menu-nav-folder-content a[href*="crazy-deals"] { color: red !important; animation: blinker 1s linear infinite; } @keyframes blinker { 50% { opacity: 0; } } Lead Developer at [Hook Creative][1] in Springfield, MO. [1]: http://www.hookcreative.co Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment