LunchBreak Sassing
How do I make an lunchbreak sassing?
What is a lunchbreak sassing? How do you make a lunchbreak sassing? This script and codes were developed by Hugo DarbyBrown on 09 August 2022, Tuesday.
LunchBreak Sassing - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>LunchBreak Sassing</title> <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> <article>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</article> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
LunchBreak Sassing - Script Codes CSS Codes
html { background: #222; -webkit-perspective: 900px; perspective: 900px;
}
article { -webkit-animation: parent-rotate 20s linear infinite; animation: parent-rotate 20s linear infinite; position: absolute; left: 50%; top: 15em; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
div { -webkit-animation: child-rotate 3.6s linear infinite; animation: child-rotate 3.6s linear infinite; border: 0.15em solid red; border-radius: 50% 50% 0 0; height: 15em; left: 50%; margin: -7.5em 0 0 -7.5em; position: absolute; top: 50%; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; width: 22.5em;
}
div:nth-child(1) { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; border-color: #bf5540; box-shadow: 0 0 10px #bf5540;
}
div:nth-child(2) { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; border-color: #bf6a40; box-shadow: 0 0 10px #bf6a40;
}
div:nth-child(3) { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; border-color: #bf8040; box-shadow: 0 0 10px #bf8040;
}
div:nth-child(4) { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; border-color: #bf9540; box-shadow: 0 0 10px #bf9540;
}
div:nth-child(5) { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; border-color: #bfaa40; box-shadow: 0 0 10px #bfaa40;
}
div:nth-child(6) { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; border-color: #bfbf40; box-shadow: 0 0 10px #bfbf40;
}
div:nth-child(7) { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; border-color: #aabf40; box-shadow: 0 0 10px #aabf40;
}
div:nth-child(8) { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; border-color: #95bf40; box-shadow: 0 0 10px #95bf40;
}
div:nth-child(9) { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; border-color: #80bf40; box-shadow: 0 0 10px #80bf40;
}
div:nth-child(10) { -webkit-animation-delay: -1s; animation-delay: -1s; border-color: #6abf40; box-shadow: 0 0 10px #6abf40;
}
div:nth-child(11) { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; border-color: #55bf40; box-shadow: 0 0 10px #55bf40;
}
div:nth-child(12) { -webkit-animation-delay: -1.2s; animation-delay: -1.2s; border-color: #40bf40; box-shadow: 0 0 10px #40bf40;
}
div:nth-child(13) { -webkit-animation-delay: -1.3s; animation-delay: -1.3s; border-color: #40bf55; box-shadow: 0 0 10px #40bf55;
}
div:nth-child(14) { -webkit-animation-delay: -1.4s; animation-delay: -1.4s; border-color: #40bf6a; box-shadow: 0 0 10px #40bf6a;
}
div:nth-child(15) { -webkit-animation-delay: -1.5s; animation-delay: -1.5s; border-color: #40bf80; box-shadow: 0 0 10px #40bf80;
}
div:nth-child(16) { -webkit-animation-delay: -1.6s; animation-delay: -1.6s; border-color: #40bf95; box-shadow: 0 0 10px #40bf95;
}
div:nth-child(17) { -webkit-animation-delay: -1.7s; animation-delay: -1.7s; border-color: #40bfaa; box-shadow: 0 0 10px #40bfaa;
}
div:nth-child(18) { -webkit-animation-delay: -1.8s; animation-delay: -1.8s; border-color: #40bfbf; box-shadow: 0 0 10px #40bfbf;
}
div:nth-child(19) { -webkit-animation-delay: -1.9s; animation-delay: -1.9s; border-color: #40aabf; box-shadow: 0 0 10px #40aabf;
}
div:nth-child(20) { -webkit-animation-delay: -2s; animation-delay: -2s; border-color: #4095bf; box-shadow: 0 0 10px #4095bf;
}
div:nth-child(21) { -webkit-animation-delay: -2.1s; animation-delay: -2.1s; border-color: #4080bf; box-shadow: 0 0 10px #4080bf;
}
div:nth-child(22) { -webkit-animation-delay: -2.2s; animation-delay: -2.2s; border-color: #406abf; box-shadow: 0 0 10px #406abf;
}
div:nth-child(23) { -webkit-animation-delay: -2.3s; animation-delay: -2.3s; border-color: #4055bf; box-shadow: 0 0 10px #4055bf;
}
div:nth-child(24) { -webkit-animation-delay: -2.4s; animation-delay: -2.4s; border-color: #4040bf; box-shadow: 0 0 10px #4040bf;
}
div:nth-child(25) { -webkit-animation-delay: -2.5s; animation-delay: -2.5s; border-color: #5540bf; box-shadow: 0 0 10px #5540bf;
}
div:nth-child(26) { -webkit-animation-delay: -2.6s; animation-delay: -2.6s; border-color: #6a40bf; box-shadow: 0 0 10px #6a40bf;
}
div:nth-child(27) { -webkit-animation-delay: -2.7s; animation-delay: -2.7s; border-color: #8040bf; box-shadow: 0 0 10px #8040bf;
}
div:nth-child(28) { -webkit-animation-delay: -2.8s; animation-delay: -2.8s; border-color: #9540bf; box-shadow: 0 0 10px #9540bf;
}
div:nth-child(29) { -webkit-animation-delay: -2.9s; animation-delay: -2.9s; border-color: #aa40bf; box-shadow: 0 0 10px #aa40bf;
}
div:nth-child(30) { -webkit-animation-delay: -3s; animation-delay: -3s; border-color: #bf40bf; box-shadow: 0 0 10px #bf40bf;
}
div:nth-child(31) { -webkit-animation-delay: -3.1s; animation-delay: -3.1s; border-color: #bf40aa; box-shadow: 0 0 10px #bf40aa;
}
div:nth-child(32) { -webkit-animation-delay: -3.2s; animation-delay: -3.2s; border-color: #bf4095; box-shadow: 0 0 10px #bf4095;
}
div:nth-child(33) { -webkit-animation-delay: -3.3s; animation-delay: -3.3s; border-color: #bf4080; box-shadow: 0 0 10px #bf4080;
}
div:nth-child(34) { -webkit-animation-delay: -3.4s; animation-delay: -3.4s; border-color: #bf406a; box-shadow: 0 0 10px #bf406a;
}
div:nth-child(35) { -webkit-animation-delay: -3.5s; animation-delay: -3.5s; border-color: #bf4055; box-shadow: 0 0 10px #bf4055;
}
div:nth-child(36) { -webkit-animation-delay: -3.6s; animation-delay: -3.6s; border-color: #bf4040; box-shadow: 0 0 10px #bf4040;
}
@-webkit-keyframes child-rotate { to { -webkit-transform: rotateX(360deg); transform: rotateX(360deg); }
}
@keyframes child-rotate { to { -webkit-transform: rotateX(360deg); transform: rotateX(360deg); }
}
@-webkit-keyframes parent-rotate { to { -webkit-transform: rotateY(360deg) rotateY(360deg); transform: rotateY(360deg) rotateY(360deg); }
}
@keyframes parent-rotate { to { -webkit-transform: rotateY(360deg) rotateY(360deg); transform: rotateY(360deg) rotateY(360deg); }
}
Developer | Hugo DarbyBrown |
Username | hugo |
Uploaded | August 09, 2022 |
Rating | 4.5 |
Size | 2,885 Kb |
Views | 30,360 |
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 |
Mixer MKII | 9,722 Kb |
Shade - Shadow Mixin | 9,364 Kb |
Zocial Buttons | 9,113 Kb |
Iron Man Login Form | 7,117 Kb |
Shop Talk logo made in CSS | 19,368 Kb |
Social-Media Card | 6,177 Kb |
Scroll Overflow Menu | 5,614 Kb |
Animated Navicons | 3,888 Kb |
LunchBreak Sassing | 2,885 Kb |
Animated Submit Button | 5,860 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 |
Main page display | BarryKe | 4,562 Kb |
Google Fonts Sass Mixin | HugoGiraudel | 4,237 Kb |
Confirm Close Of Foundation Reveal Modal | Winghouchan | 1,818 Kb |
Testimonial Fancy tabs responsive | Amit-webdesigner | 3,056 Kb |
Simple search using AngularJS | Haykou | 1,802 Kb |
Welcome | Nakome | 6,076 Kb |
Basic HTML Slideshow | Tomhodgins | 3,386 Kb |
P1 | Vivi_Lai | 1,533 Kb |
RPG Style Text Dialogue | Odylic | 2,635 Kb |
Login with flip 3d animation | Mariusbalaj | 3,014 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!