Text Type Animation in html and css

<!DOCTYPE html> <html> <head> <title>Text Type Animation</title> <style type=”text/css”> h1 { animation: type 10s steps(29); overflow: hidden; white-space: nowrap; font-family: arial; border-right: 5px solid black; width: 40ch; } @keyframes type { 0% { width: 0ch; } 100% { width: 40ch; } } </style> </head> <body> <h1> Welcome to the Students Empire Website </h1> </body> </html>

circle shaped animate on hover effect in css

<!DOCTYPE html> <html> <head> <style type=’text/css’> .myborder { width: 100px; height: 100px; background: lightgreen; transition: all .5s; -webkit-transition: all .5s; -moz-transition: all .5s; } .myborder:hover { border-radius: 50%; border: 2px solid darkblue; } </style> </head> <body> <div class=”myborder”></div> </body> </html>

Create Blur Animation effect items on hover in css

<!DOCTYPE html> <html> <head> <style type=’text/css’> ul { height: 200px; list-style: none; margin: 100px auto; width: 400px; } li { background: red; float: left; height: 80px; margin: 0 20px 20px 0; width: 80px; -webkit-transition: .5s; -moz-transition: .5s; -ms-transition: .5s; -o-transition: .5s; transition: .5s; } ul:hover li { box-shadow: 0 0 15px 5px red; opacity: .25;

Loading Animation in css

<!DOCTYPE html> <html> <head> <title>Loading Animation</title> </head> <style type=”text/css”> .loader { width: 60px; height: 60px; background: transparent; border: 10px solid transparent; border-top-color: #f56; border-left-color: #f56; border-radius: 50%; animation: loader .75s 10 ease forwards; } @keyframes loader { 100% { transform: rotate(360deg); } } </style> <body> <div class=”loader”></div> </body> </html>