Traveling through Tron - Best viewed in Webkit

Developer
John Urbank
Size
3,195 Kb
Views
54,648
  1. Traveling through Tron - Best viewed in Webkit Previews
  2. Traveling through Tron - Best viewed in Webkit HTML Codes
  3. Traveling through Tron - Best viewed in Webkit CSS Codes

How do I make an traveling through tron - best viewed in webkit?

Animated background position on 3D planes. . What is a traveling through tron - best viewed in webkit? How do you make a traveling through tron - best viewed in webkit? This script and codes were developed by John Urbank on 08 July 2022, Friday.

Traveling through Tron - Best viewed in Webkit Previews
IQ Test

Traveling through Tron - Best viewed in Webkit - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Traveling through Tron - Best viewed in Webkit</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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 { height: 100%; overflow: hidden;
}
body { position: relative; height: 100%; background: linear-gradient(#6084d7 25%, #a2cef4 50%, #a2cef4 50%, #6084d7 100%);
}
.wrap { width: 100%; height: 100%; position: absolute; margin: 0 auto; perspective: 360px; perspective-origin: 50% 50%;
}
.top-plane, .bottom-plane { width: 200%; height: 130%; position: absolute; bottom: -30%; left: -50%; background-image: -webkit-linear-gradient(#a2cef4 2px, transparent 2px), -webkit-linear-gradient(left, #a2cef4 2px, transparent 2px); background-size: 100px 100px,100px 100px; background-position: -1px -1px,-1px -1px; transform: rotateX(85deg); animation: planeMoveTop 2s infinite linear;
}
.bottom-plane { transform: rotateX(-85deg); top: -30%; animation: planeMoveBot 2s infinite linear;
}
@keyframes planeMoveTop { from { background-position: 0px -100px,0px 0px; } to { background-position: 0px 0px, 100px 0px; }
}
@keyframes planeMoveBot { from { background-position: 0px 0px,0px 0px; } to { background-position: 0px -100px, 100px 0px; }
}
@media (max-height: 350px) { .wrap { perspective: 210px; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <body> <div class='wrap'> <div class='top-plane'></div> <div class='bottom-plane'></div> </div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Traveling through Tron - Best viewed in Webkit - Script Codes CSS Codes

html { height: 100%; overflow: hidden;
}
body { position: relative; height: 100%; background: linear-gradient(#6084d7 25%, #a2cef4 50%, #a2cef4 50%, #6084d7 100%);
}
.wrap { width: 100%; height: 100%; position: absolute; margin: 0 auto; perspective: 360px; perspective-origin: 50% 50%;
}
.top-plane, .bottom-plane { width: 200%; height: 130%; position: absolute; bottom: -30%; left: -50%; background-image: -webkit-linear-gradient(#a2cef4 2px, transparent 2px), -webkit-linear-gradient(left, #a2cef4 2px, transparent 2px); background-size: 100px 100px,100px 100px; background-position: -1px -1px,-1px -1px; transform: rotateX(85deg); animation: planeMoveTop 2s infinite linear;
}
.bottom-plane { transform: rotateX(-85deg); top: -30%; animation: planeMoveBot 2s infinite linear;
}
@keyframes planeMoveTop { from { background-position: 0px -100px,0px 0px; } to { background-position: 0px 0px, 100px 0px; }
}
@keyframes planeMoveBot { from { background-position: 0px 0px,0px 0px; } to { background-position: 0px -100px, 100px 0px; }
}
@media (max-height: 350px) { .wrap { perspective: 210px; }
}
Traveling through Tron - Best viewed in Webkit - Script Codes
Traveling through Tron - Best viewed in Webkit - Script Codes
Home Page Home
Developer John Urbank
Username jurbank
Uploaded July 08, 2022
Rating 4
Size 3,195 Kb
Views 54,648
Do you need developer help for Traveling through Tron - Best viewed in Webkit?

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!

John Urbank (jurbank) Script Codes
Name
Simple jQuery Slider
Diagonal CSS Pattern
Time is Money
Simple, CSS only, responsive menu
CubeTronic
Hamburger subtract
Lego style loading text
Logo Slider
A Pen by John Urbank
Tape Cassette Icon - CSS Only
Create amazing marketing copy 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!