Amazing Perspective Walking Background
How do I make an amazing perspective walking background?
What is a amazing perspective walking background? How do you make a amazing perspective walking background? This script and codes were developed by Luciano Tonet on 13 October 2022, Thursday.
Amazing Perspective Walking Background - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Amazing Perspective Walking Background</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>
Amazing Perspective Walking Background - Script Codes CSS Codes
body { width: 100%; overflow: hidden; background-color: #000;
}
body:before { position: absolute; z-index: -10; width: 140%; height: 140%; bottom: 0; left: -20%; right: 0; content: ''; background: url(http://8theme.com/demo/royal/preview/img/bg.jpg); background-position: center center; background-size: 50%; -moz-transform: perspective(45em) rotateX(45deg); -o-transform: perspective(45em) rotateX(45deg); -ms-transform: perspective(45em) rotateX(45deg); transform: perspective(45em) rotateX(45deg); -moz-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation-name: splash; -moz-animation-name: splash; -o-animation-name: splash; animation-name: splash; -ms-transition: opacity 30s ease-in-out, transform 5s ease-in-out; -webkit-transition: opacity 30s ease-in-out, transform 5s ease-in-out; -moz-transition: opacity 30s ease-in-out, transform 5s ease-in-out; transition: opacity 30s ease-in-out, transform 5s ease-in-out; -webkit-animation-duration: 60s; -moz-animation-duration: 60s; -ms-animation-duration: 60s; -o-animation-duration: 60s; animation-duration: 60s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; animation-timing-function: linear; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; opacity: 1;
}
/* OVERLAY */
/*
body:after { position: absolute; z-index: -10; width: 100%; height: 100%; top: 0; left: 0; right: 0; content: ''; background-color: rgba(20, 20, 20, 0.6);
} */
@-webkit-keyframes backgroundScroll { from { background-position: 0 0; } to { background-position: -1920px 1152px; }
}
@keyframes backgroundScroll { from { background-position: 0 0; } to { background-position: calc(-100%) 1152px; }
}
@keyframes splash { 0% { background-position: 0% 0%; } 100% { background-position: 0% -1152px; }
}
@-moz-keyframes splash { 0% { background-position: 0% 0%; } 100% { background-position: 0% -1152px; }
}
@-webkit-keyframes splash { 0% { background-position: 0% 0%; } 100% { background-position: 0% -1152px; }
}
@-ms-keyframes splash { 0% { background-position: 0% 0%; } 100% { background-position: 0% -475px; }
}
@-o-keyframes splash { 0% { background-position: 0% 0%; } 100% { background-position: 0% -475px; }
}
Developer | Luciano Tonet |
Username | tonetlds |
Uploaded | October 13, 2022 |
Rating | 3.5 |
Size | 1,969 Kb |
Views | 14,168 |
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!
Name | Size |
Call to Scroll - Mobile | 2,259 Kb |
Background Color Change | 2,277 Kb |
Call to Scroll - Desktop | 2,251 Kb |
A Pen by Luciano Tonet | 4,516 Kb |
Perspective background from old Semantic UI website | 3,044 Kb |
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!
Name | Username | Size |
Awesome textarea | Ayoungh | 1,977 Kb |
Social buttons | Flacu | 2,022 Kb |
Simple, flat contact form | Zeaklous | 2,719 Kb |
Menubar compass mixin | Michaelparenteau | 4,925 Kb |
Adding Items | Valhead | 4,008 Kb |
Css3 slide | Nakome | 3,190 Kb |
3D-box | Parthviroja | 2,346 Kb |
Parallax-ish Sliding Content | Jdsteinbach | 2,748 Kb |
CSS Patterns | Alyda | 3,953 Kb |
Mega menu | DimaZubkov | 5,066 Kb |
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!