Happy new year animation in html and css only on January 07, 2022 Get link Facebook Twitter Pinterest Email Other Apps JHappy new year animation in html and css only Html part <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>happy new year</title> <link rel="stylesheet" href="style.css"> </head> <body> <br> <div class="container"> <h2><span class="happy-New-Year-soon">Happy New Year 2022</span></h2> <h2>kjldfjljljlkjasdf</h2> <h2>kjld <span class="happy">Happy</span> jljlkjasdf</h2> <h2>kjldfjlgj <span class="New">New</span> jljlkjasdf</h2> <h2>kjldfhjkhh <span class="Year">Year</span> jljlkjasdf</h2> <h2>kjldfjlguttutuiyt <span class="soon">2022</span> jljlkjasdf</h2> <h2>kjldfjuyuy 3544564 jljlkjasdf</h2> </div> </body> </html> CSS part *{ margin: 0; padding: 0; box-sizing: border-box; } body{ margin-left: 100px; background-color: #000; width: 400px; height: 500px; overflow: hidden; } h1{ color: #fff; text-align: center; } .container{ position: absolute; } .container h2{ text-transform: uppercase; font-weight: bolder; color: #222; letter-spacing: 2px; line-height: 40px; } .container h2 span{ animation: animate 5s linear infinite; } .container h2 span.happy{ filter: hue-rotate(180deg); animation-delay: -0.2s; } .container h2 span.New{ animation-delay: -0.7s; filter: hue-rotate(90deg); } .container h2 span.Year{ animation-delay: -0.5s; filter: hue-rotate(200deg); } .container h2 span.soon{ filter: hue-rotate(30deg); animation-delay: -0.9s; } @keyframes animate{ 0%,10%,25%,50%,70%,89%,100%{ color: #222; text-shadow: 0 0 5px #222; } 5%, 22.5%, 60%, 70.1%, 95%{ color: #fff; text-shadow: 0 0 5px #f0c, 0 0 15px #f0c, 0 0 40px #f0c, 0 0 60px #f0c, 0 0 80px #f0c, 0 0 10px #f0c; } } Comments
Comments
Post a Comment