<!DOCTYPE html> <html> <head> <style> #fluidMotion ul{ list-style-type:none; background-color:rgba(26,161,242,1); padding:20px 0px; width:auto; height:auto; float:left; } #fluidMotion ul li{ float:left; } #fluidMotion ul li a{ text-decoration:none; padding:20px; color:white; } #fluidMotion ul li a:hover{ animation:fluidmotion 0.5s infinite alternate; background-color:rgba(26,161,180,1); } @-webkit-keyframes fluidmotion{ 0%{ animation-timing-function:ease-in; zoom:100%; } 20%{ zoom:104%; animation-timing-function:ease-in; } 40%{ zoom:108%; animation-timing-function:ease-in; } 60%{ zoom:112%; animation-timing-function:ease-in; } 80%{ zoom:116%; animation-timing-function:ease-in; } 100%{ zoom:120%; animation-timing-function:ease-in; } } </style> </head> <body> <div id="fluidMotion"> <ul> <li><a href="">HOME</a></li> <li><a href="">HTML</a></li> <li><a href="">CSS</a></li> </ul> </div> </body> </html>
Run
×
Share