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>