Hiding in a box

Developer
Mark Thomes
Size
3,138 Kb
Views
54,648
  1. Hiding in a box Previews
  2. Hiding in a box HTML Codes
  3. Hiding in a box CSS Codes

How do I make an hiding in a box?

Simple animation page that I created to be used when contents of a directory are hidden.. What is a hiding in a box? How do you make a hiding in a box? This script and codes were developed by Mark Thomes on 04 July 2022, Monday.

Hiding in a box Previews
IQ Test

Hiding in a box - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hiding in a box</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ .shadow, .eyes, .iris-left, .iris-right, .box { position: absolute; top: 0; left: 0; width: 600px; height: 575px; background: url(http://withan.es/codepen/box.png) 0 0 no-repeat;
}
.boxContainer { position: absolute; display: block; width: 600px; height: 409px; top: 50%; left: 50%; margin-left: -300px; margin-top: -205px;
}
.shadow { width: 222px; height: 145px; top: 262px; left: 171px; background-position: 0px -433px;
}
.eyes { width: 51px; height: 29px; top: 346px; left: 258px; background-position: -241px -430px; animation: scan 3s infinite alternate linear;
}
.iris-left { width: 11px; height: 11px; top: 14px; left: 3px; background-position: -309px -443px; animation: scan-iris-left 1.5s infinite alternate linear;
}
.iris-right { width: 11px; height: 11px; top: 14px; left: 27px; background-position: -309px -443px; animation: scan-iris-right 1.5s infinite alternate linear;
}
.box { width: 600px; height: 409px; top: 0px; left: 0px;
}
@keyframes scan { 0% { transform: translate(-10px, 0) scale(1, 1); } 48% { transform: translate(-10px, 0) scale(1, 1); } 50% { transform: translate(0, 0) scale(1, 0); } 52% { transform: translate(10px, 0) scale(1, 1); } 100% { transform: translate(10px, 0) scale(1, 1); }
}
@keyframes scan-iris-left { 0% { transform: translate(0, 0); } 45% { transform: translate(0, 0); } 50% { transform: translate(7px, 0); } 95% { transform: translate(7px, 0); } 100% { transform: translate(0, 0); }
}
@keyframes scan-iris-right { 0% { transform: translate(0, 0); } 45% { transform: translate(0, 0); } 50% { transform: translate(9px, 0); } 95% { transform: translate(9px, 0); } 100% { transform: translate(0, 0); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="boxContainer"> <div class="shadow"></div> <div class="eyes"> <div class="iris-left"></div> <div class="iris-right"></div> </div> <div class="box"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Hiding in a box - Script Codes CSS Codes

.shadow, .eyes, .iris-left, .iris-right, .box { position: absolute; top: 0; left: 0; width: 600px; height: 575px; background: url(http://withan.es/codepen/box.png) 0 0 no-repeat;
}
.boxContainer { position: absolute; display: block; width: 600px; height: 409px; top: 50%; left: 50%; margin-left: -300px; margin-top: -205px;
}
.shadow { width: 222px; height: 145px; top: 262px; left: 171px; background-position: 0px -433px;
}
.eyes { width: 51px; height: 29px; top: 346px; left: 258px; background-position: -241px -430px; animation: scan 3s infinite alternate linear;
}
.iris-left { width: 11px; height: 11px; top: 14px; left: 3px; background-position: -309px -443px; animation: scan-iris-left 1.5s infinite alternate linear;
}
.iris-right { width: 11px; height: 11px; top: 14px; left: 27px; background-position: -309px -443px; animation: scan-iris-right 1.5s infinite alternate linear;
}
.box { width: 600px; height: 409px; top: 0px; left: 0px;
}
@keyframes scan { 0% { transform: translate(-10px, 0) scale(1, 1); } 48% { transform: translate(-10px, 0) scale(1, 1); } 50% { transform: translate(0, 0) scale(1, 0); } 52% { transform: translate(10px, 0) scale(1, 1); } 100% { transform: translate(10px, 0) scale(1, 1); }
}
@keyframes scan-iris-left { 0% { transform: translate(0, 0); } 45% { transform: translate(0, 0); } 50% { transform: translate(7px, 0); } 95% { transform: translate(7px, 0); } 100% { transform: translate(0, 0); }
}
@keyframes scan-iris-right { 0% { transform: translate(0, 0); } 45% { transform: translate(0, 0); } 50% { transform: translate(9px, 0); } 95% { transform: translate(9px, 0); } 100% { transform: translate(0, 0); }
}
Hiding in a box - Script Codes
Hiding in a box - Script Codes
Home Page Home
Developer Mark Thomes
Username WithAnEs
Uploaded July 04, 2022
Rating 3
Size 3,138 Kb
Views 54,648
Do you need developer help for Hiding in a box?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mark Thomes (WithAnEs) Script Codes
Name
Up Arrow
Save Bar
SVG Search...
CSS Self Portrait
Sloshing Beaker
Running Character
CSS Birthday Cake
Animation Delay Debug
CSS3 Gradient Stripes
CSS Colorado Flag
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!