Run Code
|
API
|
Code Wall
|
Users
|
Misc
|
Feedback
|
Login
|
Theme
|
Privacy
|
Patreon
nice floppy disk animation
<!--This code runs in your browser. If you want to see errors, examine them in your browser's developer console (usually invoked with F12)--> <!DOCTYPE html> <html> <head> <style> .image { position: absolute; left: 50%; top: 40%; margin-top: -200px; margin-left: -230px; text-align: center; } .floppyDisk { position: absolute; top: 140px; left: 140px; width: 200px; height: 210px; background-color: cadetblue; position: absolute; border: 4px solid black; border-radius: 5px 20px 5px 5px; box-shadow:0 15px 20px -10px rgba(0,0,0,0.5); } .floppyDisk:before { content: ''; position: absolute; width: 11px; height: 10px; background-color: #FFFFF2; border: 2px solid black; border-radius: 3px; top: 185px; left: 3px; } .floppyDisk:after { content: ''; position: absolute; width: 12px; height: 10px; background-color: #FFFFF2; border: 2px solid black; border-radius: 7px; top: 185px; left: 180px; } .floppyLabel { position: absolute; width: 140px; height: 120px; border: 1px solid #FFFFF2; border-radius: 15px 15px 0 0; top: 232px; left: 173px; } .floppyLabel:before { content: ''; position: absolute; width: 128px; height: 102px; background-color: #FFFFF2; border: 1px solid black; border-radius: 15px; top: 10px; left: 5px; } .floppyLabel::after { content: 'Hello World'; position: absolute; text-align: center; text-transform: uppercase; word-wrap: break-word; font-family: 'Press Start 2P', cursive; width: 120px; font-weight: 700; top: 35px; left: 11px; font-size: 20px; line-height: 30px; } .floppySlide { width: 135px; height: 80px; background-color: #484848; position: relative; border-radius: 0 0 8px 8px; left: 170px; top: 142px; border: 2px solid black; } .floppySlide::before { content: ''; width: 120px; height: 82px; background-color: lightgrey; position: absolute; border-radius: 0 0 8px 8px; left: 20px; top: -2px; border: 2px solid black; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .floppySlide:hover:before { left: -1px; transition: all 0.3s; } .floppySlide::after { content: ''; width: 30px; height: 60px; background-color: #484848; border: 1px solid black; border-radius: 2px; position: absolute; left: 90px; top: 10px; } .floppySlide:hover:after { left: 70px; transition: all 0.3s; } </style> <meta charset="UTF-8"> <title>Floppy Disk</title> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet"> </head> <body> <div class="wrapper"> <div class="image"> <div class="floppy"> <div class="floppyDisk"></div> <div class="floppyLabel"></div> <div class="floppySlide animate"></div> </div> </div> </div> </body> </html>
run
|
edit
|
history
|
help
5
Please
log in
to post a comment.
compile
Hi
Basic player movement
Basic button example
3d cube (NOT MADE BY ME!!!!!)
getting a random element from an array in javascript
Basic player movement
clearing one character on each click from a textbox
Search engine
HTML5 Button
Please log in to post a comment.