Circle Snake
How do I make an circle snake?
Recreation of http://24.media.tumblr.com/0bc4eecf3bfc48311bf79d9f9aa55d48/tumblrmhp0sftvoc1r2geqjo1500.gif in CSS. What is a circle snake? How do you make a circle snake? This script and codes were developed by Zach Saucier on 20 August 2022, Saturday.
Circle Snake - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Circle Snake</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
Circle Snake - Script Codes CSS Codes
div { border-radius:50%; position:absolute; top:50%; left:75%;
}
div:nth-of-type(odd) { background:black; }
div:nth-of-type(even) { background:white; border:2px solid black; }
div:nth-of-type(11) { height:10px; width:10px; margin-top:-5px; margin-left:-5px; -webkit-animation:slide 3s ease-in-out infinite; animation:slide 3s ease-in-out infinite;
}
div:nth-of-type(10) { height:20px; width:20px; margin-top:-12px; margin-left:-12px; -webkit-animation:slide 3s -2.7s ease-in-out infinite; animation:slide 3s -2.7s ease-in-out infinite;
}
div:nth-of-type(9) { height:40px; width:40px; margin-top:-20px; margin-left:-20px; -webkit-animation:slide 3s -2.4s ease-in-out infinite; animation:slide 3s -2.4s ease-in-out infinite;
}
div:nth-of-type(8) { height:60px; width:60px; margin-top:-32px; margin-left:-32px; -webkit-animation:slide 3s -2.1s ease-in-out infinite; animation:slide 3s -2.1s ease-in-out infinite;
}
div:nth-of-type(7) { height:80px; width:80px; margin-top:-40px; margin-left:-40px; -webkit-animation:slide 3s -1.8s ease-in-out infinite; animation:slide 3s -1.8s ease-in-out infinite;
}
div:nth-of-type(6) { height:100px; width:100px; margin-top:-52px; margin-left:-52px; -webkit-animation:slide 3s -1.5s ease-in-out infinite; animation:slide 3s -1.5s ease-in-out infinite;
}
div:nth-of-type(5) { height:120px; width:120px; margin-top:-60px; margin-left:-60px; -webkit-animation:slide 3s -1.2s ease-in-out infinite; animation:slide 3s -1.2s ease-in-out infinite;
}
div:nth-of-type(4) { height:140px; width:140px; margin-top:-72px; margin-left:-72px; -webkit-animation:slide 3s -0.9s ease-in-out infinite; animation:slide 3s -0.9s ease-in-out infinite;
}
div:nth-of-type(3) { height:160px; width:160px; margin-top:-80px; margin-left:-80px; -webkit-animation:slide 3s -0.6s ease-in-out infinite; animation:slide 3s -0.6s ease-in-out infinite;
}
div:nth-of-type(2) { height:180px; width:180px; margin-top:-92px; margin-left:-92px; -webkit-animation:slide 3s -0.3s ease-in-out infinite; animation:slide 3s -0.3s ease-in-out infinite;
}
div:nth-of-type(1) { height:200px; width:200px; margin-top:-100px; margin-left:-100px; -webkit-animation:slide 3s ease-in-out infinite; animation:slide 3s ease-in-out infinite;
}
@keyframes slide { 0% { left:75% } 50% { left:25%; } 100% { left:75%; }
}
@-webkit-keyframes slide { 0% { left:75% } 50% { left:25%; } 100% { left:75%; }
}
Developer | Zach Saucier |
Username | Zeaklous |
Uploaded | August 20, 2022 |
Rating | 4 |
Size | 1,965 Kb |
Views | 64,768 |
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!
Name | Size |
Single Element gif Recreation | 4,044 Kb |
CSS-Only Full Page Slider | 4,161 Kb |
SVG clip path with blend mode | 8,886 Kb |
Personal site header 2017 | 6,864 Kb |
Click Based Rotation Demo | 2,086 Kb |
Swirling dots | 6,415 Kb |
Yin-Yang CSS Image Animation | 3,255 Kb |
Single element color loader | 2,603 Kb |
Simple, flat contact form | 2,719 Kb |
Circular Questionnaire | 5,141 Kb |
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!
Name | Username | Size |
Transition | Shayhowe | 1,632 Kb |
Animated Vertical CSS3 Menu Black | MaCeLMp4 | 2,750 Kb |
Simple Linear Regression with Editable Table | Melatonind | 3,264 Kb |
Twitch TV | Natester13 | 4,488 Kb |
Project -Show the Local Weather | Luciano_Britis | 2,583 Kb |
Weird glowy CSS3 game | Toneworm | 3,684 Kb |
React JS Movie Info App | MTushar | 4,870 Kb |
JavaScript constructors | Simboonlong | 2,415 Kb |
Gears | Synvox | 3,278 Kb |
Chuck Norris Background | Manz | 1,967 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!