Fly up when hovering effect in css

<!DOCTYPE html> <html> <head> <style type=’text/css’> ul { list-style-type: none; } li { float: left; margin: 5px; } a { display: block; line-height: 2500px; height: 100px; width: 100px; border-radius: 0 100px 100px 100px; text-align: center; background-color: #ccc; color: transparent; text-shadow: 0px 0px 100px rgba(0, 0, 0, 0); -webkit-transition: all .6s ease-in; } a:hover { background-color:

Enlarge grid cell in animation in css

<!DOCTYPE html> <html> <head> <style type=’text/css’> ul, li { list-style: none; padding: 0; margin: 0; } ul { width: 400px; } li, .item { width: 100px; height: 100px; } li { float: left; margin: 5px; position: relative; } .item { background-color: #eee; border: 1px solid #ccc; position: absolute; z-index: 1; -webkit-transition: all 0.1s ease-in-out; }

Create CSS3 animation on width

<!DOCTYPE html> <html> <head> <style type=’text/css’> #demo { width: 100px; height: 100px; background: red; transition: width 1s; -moz-transition: width 1s; -webkit-transition: width 1s; -o-transition: width 1s; } #demo:hover { width: 300px; } </style> </head> <body> <div id=”demo”></div> </body> </html>

Create two borders in css

<!DOCTYPE html> <html> <head> <style type=’text/css’> #borders { position: relative; z-index: 10; padding: 30px; background: #fff; border: 2px solid #390; } #borders:before { content: “”; display: block; position: absolute; z-index: -1; top: 2px; left: 2px; right: 2px; bottom: 2px; border: 2px solid #36F } </style> </head> <body> <div id=”borders”></div> </body> </html>

Blue Screen of Death Using Notepad

How To Make A Full Screen Fake Virus w_ Blue Screen of Death Using Notepad Just copy below command in notepad and save it ad bat extension @echo off echo ———————————————————————- echo WARNING! A VIRUS HAS BEEN DETECTED ON YOUR COMPUTER! pause echo FILE RECOGNIZED AS SISDPYGnfg32.bat pause echo CONTACTING ANTIVIRUS… pause echo WOULD YOU

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>