Zero element CSS tunnel
How do I make an zero element css tunnel?
What is a zero element css tunnel? How do you make a zero element css tunnel? This script and codes were developed by Keith Clark on 12 August 2022, Friday.
Zero element CSS tunnel Previews
Zero element CSS tunnel - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Zero element CSS tunnel</title> <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! */ html { perspective: 500px; background: rgb(10,25,10);
}
html, html::before, html::after,
head, head::before, head::after,
body, body::before, body::after
{ padding:0; margin:0; display:block; content: ""; position: absolute; top:0; left:0; background-size: 400px;
}
html { width: 200px; height: 200px; left: 50%; top: 50%; margin: -100px; animation: 10s move ease-in-out alternate infinite;
}
/* left shadow */
body { top: 50%; left: 50%; width: 1200px; height: 200px; margin: -100px -600px; background: linear-gradient(90deg, rgba(0,0,0,0), rgba(10,20,10,.75) 40%, rgba(10,25,10,1) 800px); transform: translateX(-99px) rotateY(90deg); transform-style: preserve-3d; box-shadow: inset 0 0 10px 2px rgba(10,25,10,1);
}
/* left */
body::after { top:0; left:0; right:0; bottom:0; background-image: url(http://keithclark.co.uk/labs/css-fps/wall.jpg); transform: translateZ(-1px); animation: 2s left linear infinite;
}
/* right shadow */
body::before { top:0; left:0; right:0; bottom:0; background: linear-gradient(90deg, rgba(0,0,0,0), rgba(10,20,10,.75) 40%, rgba(10,25,10,1) 800px); transform: translateZ(198px); z-index:1; box-shadow: inset 0 0 10px 2px rgba(10,25,10,1);
}
/* ceiling shadow */
head { top: 50%; left: 50%; width: 200px; height: 1200px; margin: -600px -100px; background: linear-gradient(0deg, rgba(0,0,0,0), rgba(10,20,10,.75) 40%, rgba(10,25,10,1) 800px); transform: translateY(-99px) rotateX(90deg); transform-style: preserve-3d; box-shadow: inset 0 0 10px 2px rgba(10,25,10,1);
}
/* right */
head::before { top:0px; left:0; width: 1200px; height: 200px; transform: translateX(-400px) translateY(600px) translateZ(-100px) rotateY(90deg) rotateZ(90deg); background-image: url(http://keithclark.co.uk/labs/css-fps/wall.jpg); animation: 2s right linear infinite;
}
/* ceiling */
head::after { top:0px; left:-10px; right:-10px; bottom:0px; background-image: url(http://keithclark.co.uk/labs/css-fps/ceil.jpg); animation: 2s top linear infinite;
}
/* floor */
html::before { top: 50%; left: 50%; width: 220px; height: 1200px; margin: -600px -110px; background-image: url(http://keithclark.co.uk/labs/css-fps/floor.jpg); transform: translateY(101px) rotateX(90deg); animation: 2s bottom linear infinite;
}
/* floor shadow */
html::after { top: 50%; left: 50%; width: 200px; height: 1200px; margin: -600px -100px; background: linear-gradient(0deg, rgba(0,0,0,0), rgba(10,20,10,.75) 40%, rgba(10,25,10,1) 800px); transform: translateY(99px) rotateX(90deg); box-shadow: inset 0 0 10px 2px rgba(10,25,10,1);
}
@keyframes left { 0% { transform: translateZ(-1px) } 100% { transform: translateZ(-1px) translateX(-400px) }
}
@keyframes top { from { transform: translateZ(1px); } to { transform: translateY(400px) translateZ(1px); }
}
@keyframes bottom { from { transform: translateY(101px) rotateX(90deg); } to { transform: translateZ(400px) translateY(101px) rotateX(90deg); }
}
@keyframes right { from { transform: translateX(-400px) translateY(600px) translateZ(-100px) rotateY(90deg) rotateZ(-90deg); } to { transform: translateX(-400px) translateY(1000px) translateZ(-100px) rotateY(90deg) rotateZ(-90deg); }
}
@keyframes move { 0% { transform: translateX(-250px) translateY(150px) scale(.8) rotateZ(5deg); } 50% { transform: translateX(250px) translateY(-150px) scale(.8) rotateZ(-5deg); } 100% { transform: translateX(80px) translateY(300px) scale(.8) rotateZ(-2deg); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
</body>
</html>
Zero element CSS tunnel - Script Codes CSS Codes
html { perspective: 500px; background: rgb(10,25,10);
}
html, html::before, html::after,
head, head::before, head::after,
body, body::before, body::after
{ padding:0; margin:0; display:block; content: ""; position: absolute; top:0; left:0; background-size: 400px;
}
html { width: 200px; height: 200px; left: 50%; top: 50%; margin: -100px; animation: 10s move ease-in-out alternate infinite;
}
/* left shadow */
body { top: 50%; left: 50%; width: 1200px; height: 200px; margin: -100px -600px; background: linear-gradient(90deg, rgba(0,0,0,0), rgba(10,20,10,.75) 40%, rgba(10,25,10,1) 800px); transform: translateX(-99px) rotateY(90deg); transform-style: preserve-3d; box-shadow: inset 0 0 10px 2px rgba(10,25,10,1);
}
/* left */
body::after { top:0; left:0; right:0; bottom:0; background-image: url(http://keithclark.co.uk/labs/css-fps/wall.jpg); transform: translateZ(-1px); animation: 2s left linear infinite;
}
/* right shadow */
body::before { top:0; left:0; right:0; bottom:0; background: linear-gradient(90deg, rgba(0,0,0,0), rgba(10,20,10,.75) 40%, rgba(10,25,10,1) 800px); transform: translateZ(198px); z-index:1; box-shadow: inset 0 0 10px 2px rgba(10,25,10,1);
}
/* ceiling shadow */
head { top: 50%; left: 50%; width: 200px; height: 1200px; margin: -600px -100px; background: linear-gradient(0deg, rgba(0,0,0,0), rgba(10,20,10,.75) 40%, rgba(10,25,10,1) 800px); transform: translateY(-99px) rotateX(90deg); transform-style: preserve-3d; box-shadow: inset 0 0 10px 2px rgba(10,25,10,1);
}
/* right */
head::before { top:0px; left:0; width: 1200px; height: 200px; transform: translateX(-400px) translateY(600px) translateZ(-100px) rotateY(90deg) rotateZ(90deg); background-image: url(http://keithclark.co.uk/labs/css-fps/wall.jpg); animation: 2s right linear infinite;
}
/* ceiling */
head::after { top:0px; left:-10px; right:-10px; bottom:0px; background-image: url(http://keithclark.co.uk/labs/css-fps/ceil.jpg); animation: 2s top linear infinite;
}
/* floor */
html::before { top: 50%; left: 50%; width: 220px; height: 1200px; margin: -600px -110px; background-image: url(http://keithclark.co.uk/labs/css-fps/floor.jpg); transform: translateY(101px) rotateX(90deg); animation: 2s bottom linear infinite;
}
/* floor shadow */
html::after { top: 50%; left: 50%; width: 200px; height: 1200px; margin: -600px -100px; background: linear-gradient(0deg, rgba(0,0,0,0), rgba(10,20,10,.75) 40%, rgba(10,25,10,1) 800px); transform: translateY(99px) rotateX(90deg); box-shadow: inset 0 0 10px 2px rgba(10,25,10,1);
}
@keyframes left { 0% { transform: translateZ(-1px) } 100% { transform: translateZ(-1px) translateX(-400px) }
}
@keyframes top { from { transform: translateZ(1px); } to { transform: translateY(400px) translateZ(1px); }
}
@keyframes bottom { from { transform: translateY(101px) rotateX(90deg); } to { transform: translateZ(400px) translateY(101px) rotateX(90deg); }
}
@keyframes right { from { transform: translateX(-400px) translateY(600px) translateZ(-100px) rotateY(90deg) rotateZ(-90deg); } to { transform: translateX(-400px) translateY(1000px) translateZ(-100px) rotateY(90deg) rotateZ(-90deg); }
}
@keyframes move { 0% { transform: translateX(-250px) translateY(150px) scale(.8) rotateZ(5deg); } 50% { transform: translateX(250px) translateY(-150px) scale(.8) rotateZ(-5deg); } 100% { transform: translateX(80px) translateY(300px) scale(.8) rotateZ(-2deg); }
}
| Developer | Keith Clark |
| Username | keithclark |
| Uploaded | August 12, 2022 |
| Rating | 4.5 |
| Size | 3,099 Kb |
| Views | 50,600 |
Do you need developer help for Zero element CSS tunnel?
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!
Keith Clark (keithclark) Script Codes
| Name | Size |
| One element CSS Snow | 4,066 Kb |
| Pure CSS starfield | 2,798 Kb |
| Single element Atari ST demo effect | 2,477 Kb |
| Pure CSS Parallax Scrolling | 3,343 Kb |
| Pure CSS parallax demo | 4,855 Kb |
| Pure CSS z-axis scrolling | 3,029 Kb |
| A Pen by Keith Clark | 117,316 Kb |
| CSS shaded cubes | 2,941 Kb |
| Faking gradient transitions | 1,983 Kb |
| Single element pure CSS 3D starfield | 7,338 Kb |
Create amazing love letters 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!
Similar Scripts & Codes
| Name | Username | Size |
| SlideupBoxes | Gavra | 23,772 Kb |
| Rotate Demo | Agelber | 3,061 Kb |
| CSS background-size - GSAP | Jonathan | 2,209 Kb |
| Jstam.com Home Page | Jstam | 10,558 Kb |
| Fun animations with CSS3 | Minimalmonkey | 2,360 Kb |
| Waveform function for a siren tone modulation | Clafou | 1,656 Kb |
| Easing | GreenSock | 2,043 Kb |
| Flickering Light Text Effect | Mandymichael | 3,315 Kb |
| Sequence.js - Sliding Horizontal Parallax | Maheshc | 4,537 Kb |
| A Pen by Matt Popovich | Mpopv | 3,349 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!