CSS3 Illusion - Believe it or not, these four squares move at the same constant speed

Developer
Felquis
Size
4,137 Kb
Views
12,144
  1. CSS3 Illusion - Believe it or not, these four squares move at the same constant speed Previews
  2. CSS3 Illusion - Believe it or not, these four squares move at the same constant speed HTML Codes
  3. CSS3 Illusion - Believe it or not, these four squares move at the same constant speed CSS Codes

How do I make an css3 illusion - believe it or not, these four squares move at the same constant speed?

Hi,This is a illusion made with CSS3, based on this gizmodo post -> http://j.mp/1hXMs1FBelieve it or not, these four squares move at the same constant speed. What is a css3 illusion - believe it or not, these four squares move at the same constant speed? How do you make a css3 illusion - believe it or not, these four squares move at the same constant speed? This script and codes were developed by Felquis on 08 December 2022, Thursday.

CSS3 Illusion - Believe it or not, these four squares move at the same constant speed Previews
IQ Test

CSS3 Illusion - Believe it or not, these four squares move at the same constant speed - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 Illusion - Believe it or not, these four squares move at the same constant speed</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <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, body { height: 100%; position: relative; display: flex; justify-content: center; margin: 0;
}
body { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #000000), color-stop(50%, #000000), color-stop(50%, #ffffff)); background-image: -moz-linear-gradient(top, #000000 0%, #000000 50%, #ffffff 50%); background-image: -webkit-linear-gradient(top, #000000 0%, #000000 50%, #ffffff 50%); background-image: linear-gradient(to bottom, #000000 0%, #000000 50%, #ffffff 50%); position: absolute; background-size: 100% 3%; background-repeat: repeat-y; top: 0; left: 0; width: 100%;
}
body:before, body:after, html:before, html:after { content: ""; width: 10%; height: 10%; display: block; position: absolute; top: 0; animation: theElevator 10s linear 0s infinite alternate;
}
body:before { background: blue; transform: translate(-60%, 0);
}
body:after { background: yellow; transform: translate(60%, 0);
}
html:before { background: yellow; transform: translate(-180%, 0);
}
html:after { background: blue; transform: translate(180%, 0);
}
@keyframes theElevator { 0% { top: 0; width: 5%; } 100% { top: 90%; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<!--
Hi,
This is an illusion made with CSS3, based on this gizmodo post "-> https://j.mp/1hXMs1F"
Believe it or not, these four squares move at the same constant speed
-->
</body>
</html>

CSS3 Illusion - Believe it or not, these four squares move at the same constant speed - Script Codes CSS Codes

html, body { height: 100%; position: relative; display: flex; justify-content: center; margin: 0;
}
body { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIi8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #000000), color-stop(50%, #000000), color-stop(50%, #ffffff)); background-image: -moz-linear-gradient(top, #000000 0%, #000000 50%, #ffffff 50%); background-image: -webkit-linear-gradient(top, #000000 0%, #000000 50%, #ffffff 50%); background-image: linear-gradient(to bottom, #000000 0%, #000000 50%, #ffffff 50%); position: absolute; background-size: 100% 3%; background-repeat: repeat-y; top: 0; left: 0; width: 100%;
}
body:before, body:after, html:before, html:after { content: ""; width: 10%; height: 10%; display: block; position: absolute; top: 0; animation: theElevator 10s linear 0s infinite alternate;
}
body:before { background: blue; transform: translate(-60%, 0);
}
body:after { background: yellow; transform: translate(60%, 0);
}
html:before { background: yellow; transform: translate(-180%, 0);
}
html:after { background: blue; transform: translate(180%, 0);
}
@keyframes theElevator { 0% { top: 0; width: 5%; } 100% { top: 90%; }
}
CSS3 Illusion - Believe it or not, these four squares move at the same constant speed - Script Codes
CSS3 Illusion - Believe it or not, these four squares move at the same constant speed - Script Codes
Home Page Home
Developer Felquis
Username felquis
Uploaded December 08, 2022
Rating 3
Size 4,137 Kb
Views 12,144
Do you need developer help for CSS3 Illusion - Believe it or not, these four squares move at the same constant speed?

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!

Felquis (felquis) Script Codes
Name
Exemplo fazendo um prepend com innerHTML
Changing pseudo-element content using JavaScript
Suggested input
Teste prepend com insertAdjacentHTML
Ionic Infinite outside ion-content with ion-pane
A Pen by Felquis
StopPropagation example with pure JS
Teste prepend com Node API usando DocumentFragment
Sticky Menu with VanillaJS
Accelerometer Test
Create amazing SEO content 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!