About
Explore
Events & Classes
Support Us
Join
Sign In
purple_ghost
View Project Page
Run
Fullscreen
random ghost
HTML
CSS
JS
<!DOCTYPE HTML> <html> <head> <title>Page Title</title> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0,shrink-to-fit=no,width=device-width"> </head> <body> <div class="ghost"> <div class="eye-left"></div> <div class="eye-right"></div> <div class="mouth-pill"></div> </div> </body> </html>
body { background-color: #c95b00; } .ghost { background-color: white; width: 100px; height: 140px; opacity: .9; border-top-left-radius: 50px; border-top-right-radius: 50px; margin-left: 10px; position: absolute; z-index: 1000; top: 47%; left: 50%; transform: translate(-50%,-50%); animation: floater 1.5s infinite; box-shadow: -1px 1px 16px 3px rgba(81,81,81,0.65); } .ghost:after { background: linear-gradient(-45deg, white 16px, transparent 0), linear-gradient(45deg, white 16px, transparent 0); background-position: center bottom; background-repeat: repeat-x; background-size: 32px 32px; content: " "; display: block; transform: scale(-1, -1); position: absolute; top: 130px; left: 0px; width: 100px; height: 32px; } @keyframes floater { 0% { top: 47%; } 50% { top: 50%; } 100% { top: 47%; } } .eye-left { background-color: #212121; border-radius: 50%; width: 20px; height: 25px; position: absolute; top: 30px; left: 20px; } .eye-right { background-color: #212121; border-radius: 50%; width: 20px; height: 25px; position: absolute; top: 30px; left: 58px; } .mouth-pill { background-color: #212121; border-radius: 10px; width: 35px; height: 10px; top: 80px; left: 30px; position: absolute; }