Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Was watching Dr. Strange, thought that those "strange" green animations can be done using CSS...? I think yes
<!DOCTYPE html>
<html>
<head>
<title>JLT - Animated squares on top of a circle</title>
<style>
body{
padding: 300px;
}
div{
position: absolute;
}
.square{
width: 200px;
height: 200px;
border: 1px solid #0F0;
}
.rounded{
border-radius: 50%;
}
.deg45{
transform: rotate(45deg);
}
.rcw{
animation: rotationcw 3s infinite linear;
}
.rccw{
animation: rotationccw 3s infinite linear;
}
@keyframes rotationcw {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
@keyframes rotationccw {
from {
transform: rotate(359deg);
}
to {
transform: rotate(0deg);
}
}
</style>
</head>
<body>
<div class="square rccw"></div>
<div class="square deg45 rcw"></div>
<div class="square rounded"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.