Infinite Square

Developer
Chris Burnell
Size
2,937 Kb
Views
60,720
  1. Infinite Square Previews
  2. Infinite Square HTML Codes
  3. Infinite Square CSS Codes

How do I make an infinite square?

What is a infinite square? How do you make a infinite square? This script and codes were developed by Chris Burnell on 16 September 2022, Friday.

Infinite Square Previews
IQ Test

Infinite Square - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Infinite Square</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Hover the square to see what’s happening. -->
<div class="square"> <div class="square-triangle square-triangle--top"></div> <div class="square-triangle square-triangle--bottom"></div> <div class="square-triangle square-triangle--left"></div> <div class="square-triangle square-triangle--right"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Infinite Square - Script Codes CSS Codes

.square,
.square-triangle { position: absolute; -webkit-animation-duration: 3s; animation-duration: 3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;
}
.square { background-color: coral; width: 15em; height: 15em; top: 50%; left: 50%; -webkit-animation-name: square-master; animation-name: square-master; -webkit-transform-origin: center center; transform-origin: center center; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0);
}
.square-triangle { width: 0; height: 0;
}
.square-triangle--top { top: 0; left: 0; border-top: 7.5em solid coral; border-left: 7.5em solid transparent; border-right: 7.5em solid transparent; -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: square-triangle-vertical; animation-name: square-triangle-vertical;
}
.square:hover .square-triangle--top, .square:focus .square-triangle--top { border-top-color: olivedrab;
}
.square-triangle--bottom { bottom: 0; left: 0; border-bottom: 7.5em solid coral; border-left: 7.5em solid transparent; border-right: 7.5em solid transparent; -webkit-transform-origin: bottom center; transform-origin: bottom center; -webkit-animation-name: square-triangle-vertical; animation-name: square-triangle-vertical;
}
.square:hover .square-triangle--bottom, .square:focus .square-triangle--bottom { border-bottom-color: maroon;
}
.square-triangle--left { top: 0; left: 0; border-left: 7.5em solid coral; border-bottom: 7.5em solid transparent; border-top: 7.5em solid transparent; -webkit-transform-origin: center left; transform-origin: center left; -webkit-animation-name: square-triangle-horizontal; animation-name: square-triangle-horizontal;
}
.square:hover .square-triangle--left, .square:focus .square-triangle--left { border-left-color: cadetblue;
}
.square-triangle--right { top: 0; right: 0; border-right: 7.5em solid coral; border-bottom: 7.5em solid transparent; border-top: 7.5em solid transparent; -webkit-transform-origin: center right; transform-origin: center right; -webkit-animation-name: square-triangle-horizontal; animation-name: square-triangle-horizontal;
}
.square:hover .square-triangle--right, .square:focus .square-triangle--right { border-right-color: goldenrod;
}
@-webkit-keyframes square-master { 0% { background-color: #ff6c37; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } 75% { background-color: coral; } 100% { -webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg) scale(0.705); transform: translate3d(-50%, -50%, 0) rotate(45deg) scale(0.705); }
}
@keyframes square-master { 0% { background-color: #ff6c37; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } 75% { background-color: coral; } 100% { -webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg) scale(0.705); transform: translate3d(-50%, -50%, 0) rotate(45deg) scale(0.705); }
}
@-webkit-keyframes square-triangle-vertical { 0%, 10% { -webkit-transform: none; transform: none; } 100% { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); }
}
@keyframes square-triangle-vertical { 0%, 10% { -webkit-transform: none; transform: none; } 100% { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); }
}
@-webkit-keyframes square-triangle-horizontal { 0%, 10% { -webkit-transform: none; transform: none; } 100% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
}
@keyframes square-triangle-horizontal { 0%, 10% { -webkit-transform: none; transform: none; } 100% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
}
html,
body { height: 100%;
}
body { background-color: mediumseagreen; position: relative; overflow-y: hidden;
}
Infinite Square - Script Codes
Infinite Square - Script Codes
Home Page Home
Developer Chris Burnell
Username chrisburnell
Uploaded September 16, 2022
Rating 3.5
Size 2,937 Kb
Views 60,720
Do you need developer help for Infinite Square?

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!

Chris Burnell (chrisburnell) Script Codes
Name
Globule Bleu Jobs Page Anchor Rollover Effect
Message Types
The power of transform for centering
Slip-n-slide Modal
Zoomy Anchor Thing
Clock Face Idea
New Brandings
Stupid RTL Demo
Interesting Hover Animation
Interaction Jazz
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!