Infinite Square

Developer
Chris Burnell
Size
2,937 Kb
Views
60,690

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,690
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
Simple CSS Checkbox
Simple CSS Checkbox
Square Illusion
Psychedelic Slice
Slip-n-slide Modal
Stupid RTL Demo
The power of transform for centering
Student Charter Demo for City University
Interesting Hover Animation
Persistent Light Source Transform
Create amazing art & images 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!