Twirling Flower

Developer

Size

4,081 Kb

Views

22,264

Twirling Flower Previews
Twirling Flower HTML Codes
Twirling Flower CSS Codes

How do I make an twirling flower?

A sort of flower-looking thing that rotates and morphs. . What is a twirling flower? How do you make a twirling flower? This script and codes were developed by Tiffany Stoik on 28 November 2022, Monday.

Twirling Flower Previews

Twirling Flower - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Twirling Flower</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/80729/helpers.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: cyan; overflow: hidden;
}
.group { position: absolute; top: 50%; left: 50%; width: 100vmax; height: 100vmax; transform: translate(-50%, -50%);
}
.face { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; box-shadow: 0 0 5vmax rgba(0, 0, 0, 0.15); border-radius: 10%; animation: spin 20s infinite linear; animation-delay: -10s;
}
.face:first-child { box-shadow: none;
}
.face:nth-child(1) { width: 100%; height: 100%; background: cyan; transform: translate(-50%, -50%) rotate(0deg); animation-name: spin-0;
}
@keyframes spin-0 { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(0deg); }
}
.face:nth-child(2) { width: 95%; height: 95%; background: #00e3ff; transform: translate(-50%, -50%) rotate(10deg); animation-name: spin-1;
}
@keyframes spin-1 { 0% { transform: translate(-50%, -50%) rotate(90deg); } 100% { transform: translate(-50%, -50%) rotate(-90deg); }
}
.face:nth-child(3) { width: 90%; height: 90%; background: #00c8ff; transform: translate(-50%, -50%) rotate(20deg); animation-name: spin-2;
}
@keyframes spin-2 { 0% { transform: translate(-50%, -50%) rotate(180deg); } 100% { transform: translate(-50%, -50%) rotate(-180deg); }
}
.face:nth-child(4) { width: 85%; height: 85%; background: #00acff; transform: translate(-50%, -50%) rotate(30deg); animation-name: spin-3;
}
@keyframes spin-3 { 0% { transform: translate(-50%, -50%) rotate(270deg); } 100% { transform: translate(-50%, -50%) rotate(-270deg); }
}
.face:nth-child(5) { width: 80%; height: 80%; background: #0091ff; transform: translate(-50%, -50%) rotate(40deg); animation-name: spin-4;
}
@keyframes spin-4 { 0% { transform: translate(-50%, -50%) rotate(360deg); } 100% { transform: translate(-50%, -50%) rotate(-360deg); }
}
.face:nth-child(6) { width: 75%; height: 75%; background: #0075ff; transform: translate(-50%, -50%) rotate(50deg); animation-name: spin-5;
}
@keyframes spin-5 { 0% { transform: translate(-50%, -50%) rotate(450deg); } 100% { transform: translate(-50%, -50%) rotate(-450deg); }
}
.face:nth-child(7) { width: 70%; height: 70%; background: #0059ff; transform: translate(-50%, -50%) rotate(60deg); animation-name: spin-6;
}
@keyframes spin-6 { 0% { transform: translate(-50%, -50%) rotate(540deg); } 100% { transform: translate(-50%, -50%) rotate(-540deg); }
}
.face:nth-child(8) { width: 65%; height: 65%; background: #003eff; transform: translate(-50%, -50%) rotate(70deg); animation-name: spin-7;
}
@keyframes spin-7 { 0% { transform: translate(-50%, -50%) rotate(630deg); } 100% { transform: translate(-50%, -50%) rotate(-630deg); }
}
.face:nth-child(9) { width: 60%; height: 60%; background: #0022ff; transform: translate(-50%, -50%) rotate(80deg); animation-name: spin-8;
}
@keyframes spin-8 { 0% { transform: translate(-50%, -50%) rotate(720deg); } 100% { transform: translate(-50%, -50%) rotate(-720deg); }
}
.face:nth-child(10) { width: 55%; height: 55%; background: #0006ff; transform: translate(-50%, -50%) rotate(90deg); animation-name: spin-9;
}
@keyframes spin-9 { 0% { transform: translate(-50%, -50%) rotate(810deg); } 100% { transform: translate(-50%, -50%) rotate(-810deg); }
}
.face:nth-child(11) { width: 50%; height: 50%; background: #1500ff; transform: translate(-50%, -50%) rotate(100deg); animation-name: spin-10;
}
@keyframes spin-10 { 0% { transform: translate(-50%, -50%) rotate(900deg); } 100% { transform: translate(-50%, -50%) rotate(-900deg); }
}
.face:nth-child(12) { width: 45%; height: 45%; background: #3100ff; transform: translate(-50%, -50%) rotate(110deg); animation-name: spin-11;
}
@keyframes spin-11 { 0% { transform: translate(-50%, -50%) rotate(990deg); } 100% { transform: translate(-50%, -50%) rotate(-990deg); }
}
.face:nth-child(13) { width: 40%; height: 40%; background: #4d00ff; transform: translate(-50%, -50%) rotate(120deg); animation-name: spin-12;
}
@keyframes spin-12 { 0% { transform: translate(-50%, -50%) rotate(1080deg); } 100% { transform: translate(-50%, -50%) rotate(-1080deg); }
}
.face:nth-child(14) { width: 35%; height: 35%; background: #6800ff; transform: translate(-50%, -50%) rotate(130deg); animation-name: spin-13;
}
@keyframes spin-13 { 0% { transform: translate(-50%, -50%) rotate(1170deg); } 100% { transform: translate(-50%, -50%) rotate(-1170deg); }
}
.face:nth-child(15) { width: 30%; height: 30%; background: #8400ff; transform: translate(-50%, -50%) rotate(140deg); animation-name: spin-14;
}
@keyframes spin-14 { 0% { transform: translate(-50%, -50%) rotate(1260deg); } 100% { transform: translate(-50%, -50%) rotate(-1260deg); }
}
.face:nth-child(16) { width: 25%; height: 25%; background: #9f00ff; transform: translate(-50%, -50%) rotate(150deg); animation-name: spin-15;
}
@keyframes spin-15 { 0% { transform: translate(-50%, -50%) rotate(1350deg); } 100% { transform: translate(-50%, -50%) rotate(-1350deg); }
}
.face:nth-child(17) { width: 20%; height: 20%; background: #bb00ff; transform: translate(-50%, -50%) rotate(160deg); animation-name: spin-16;
}
@keyframes spin-16 { 0% { transform: translate(-50%, -50%) rotate(1440deg); } 100% { transform: translate(-50%, -50%) rotate(-1440deg); }
}
.face:nth-child(18) { width: 15%; height: 15%; background: #d700ff; transform: translate(-50%, -50%) rotate(170deg); animation-name: spin-17;
}
@keyframes spin-17 { 0% { transform: translate(-50%, -50%) rotate(1530deg); } 100% { transform: translate(-50%, -50%) rotate(-1530deg); }
}
.face:nth-child(19) { width: 10%; height: 10%; background: #f200ff; transform: translate(-50%, -50%) rotate(180deg); animation-name: spin-18;
}
@keyframes spin-18 { 0% { transform: translate(-50%, -50%) rotate(1620deg); } 100% { transform: translate(-50%, -50%) rotate(-1620deg); }
}
.face:nth-child(20) { width: 5%; height: 5%; background: #ff00f0; transform: translate(-50%, -50%) rotate(190deg); animation-name: spin-19;
}
@keyframes spin-19 { 0% { transform: translate(-50%, -50%) rotate(1710deg); } 100% { transform: translate(-50%, -50%) rotate(-1710deg); }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='wrapper'> <div class='group'> <div class='face'></div> <div class='face'></div> <div class='face'></div> <div class='face'></div> <div class='face'></div> <div class='face'></div> <div class='face'></div> <div class='face'></div> <div class='face'></div> <div class='face'></div> <div class='face'></div> <div class='face'></div> <div class='face'></div> <div class='face'></div> <div class='face'></div> <div class='face'></div> <div class='face'></div> <div class='face'></div> <div class='face'></div> <div class='face'></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Twirling Flower - Script Codes CSS Codes

body { background: cyan; overflow: hidden;
}
.group { position: absolute; top: 50%; left: 50%; width: 100vmax; height: 100vmax; transform: translate(-50%, -50%);
}
.face { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; box-shadow: 0 0 5vmax rgba(0, 0, 0, 0.15); border-radius: 10%; animation: spin 20s infinite linear; animation-delay: -10s;
}
.face:first-child { box-shadow: none;
}
.face:nth-child(1) { width: 100%; height: 100%; background: cyan; transform: translate(-50%, -50%) rotate(0deg); animation-name: spin-0;
}
@keyframes spin-0 { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(0deg); }
}
.face:nth-child(2) { width: 95%; height: 95%; background: #00e3ff; transform: translate(-50%, -50%) rotate(10deg); animation-name: spin-1;
}
@keyframes spin-1 { 0% { transform: translate(-50%, -50%) rotate(90deg); } 100% { transform: translate(-50%, -50%) rotate(-90deg); }
}
.face:nth-child(3) { width: 90%; height: 90%; background: #00c8ff; transform: translate(-50%, -50%) rotate(20deg); animation-name: spin-2;
}
@keyframes spin-2 { 0% { transform: translate(-50%, -50%) rotate(180deg); } 100% { transform: translate(-50%, -50%) rotate(-180deg); }
}
.face:nth-child(4) { width: 85%; height: 85%; background: #00acff; transform: translate(-50%, -50%) rotate(30deg); animation-name: spin-3;
}
@keyframes spin-3 { 0% { transform: translate(-50%, -50%) rotate(270deg); } 100% { transform: translate(-50%, -50%) rotate(-270deg); }
}
.face:nth-child(5) { width: 80%; height: 80%; background: #0091ff; transform: translate(-50%, -50%) rotate(40deg); animation-name: spin-4;
}
@keyframes spin-4 { 0% { transform: translate(-50%, -50%) rotate(360deg); } 100% { transform: translate(-50%, -50%) rotate(-360deg); }
}
.face:nth-child(6) { width: 75%; height: 75%; background: #0075ff; transform: translate(-50%, -50%) rotate(50deg); animation-name: spin-5;
}
@keyframes spin-5 { 0% { transform: translate(-50%, -50%) rotate(450deg); } 100% { transform: translate(-50%, -50%) rotate(-450deg); }
}
.face:nth-child(7) { width: 70%; height: 70%; background: #0059ff; transform: translate(-50%, -50%) rotate(60deg); animation-name: spin-6;
}
@keyframes spin-6 { 0% { transform: translate(-50%, -50%) rotate(540deg); } 100% { transform: translate(-50%, -50%) rotate(-540deg); }
}
.face:nth-child(8) { width: 65%; height: 65%; background: #003eff; transform: translate(-50%, -50%) rotate(70deg); animation-name: spin-7;
}
@keyframes spin-7 { 0% { transform: translate(-50%, -50%) rotate(630deg); } 100% { transform: translate(-50%, -50%) rotate(-630deg); }
}
.face:nth-child(9) { width: 60%; height: 60%; background: #0022ff; transform: translate(-50%, -50%) rotate(80deg); animation-name: spin-8;
}
@keyframes spin-8 { 0% { transform: translate(-50%, -50%) rotate(720deg); } 100% { transform: translate(-50%, -50%) rotate(-720deg); }
}
.face:nth-child(10) { width: 55%; height: 55%; background: #0006ff; transform: translate(-50%, -50%) rotate(90deg); animation-name: spin-9;
}
@keyframes spin-9 { 0% { transform: translate(-50%, -50%) rotate(810deg); } 100% { transform: translate(-50%, -50%) rotate(-810deg); }
}
.face:nth-child(11) { width: 50%; height: 50%; background: #1500ff; transform: translate(-50%, -50%) rotate(100deg); animation-name: spin-10;
}
@keyframes spin-10 { 0% { transform: translate(-50%, -50%) rotate(900deg); } 100% { transform: translate(-50%, -50%) rotate(-900deg); }
}
.face:nth-child(12) { width: 45%; height: 45%; background: #3100ff; transform: translate(-50%, -50%) rotate(110deg); animation-name: spin-11;
}
@keyframes spin-11 { 0% { transform: translate(-50%, -50%) rotate(990deg); } 100% { transform: translate(-50%, -50%) rotate(-990deg); }
}
.face:nth-child(13) { width: 40%; height: 40%; background: #4d00ff; transform: translate(-50%, -50%) rotate(120deg); animation-name: spin-12;
}
@keyframes spin-12 { 0% { transform: translate(-50%, -50%) rotate(1080deg); } 100% { transform: translate(-50%, -50%) rotate(-1080deg); }
}
.face:nth-child(14) { width: 35%; height: 35%; background: #6800ff; transform: translate(-50%, -50%) rotate(130deg); animation-name: spin-13;
}
@keyframes spin-13 { 0% { transform: translate(-50%, -50%) rotate(1170deg); } 100% { transform: translate(-50%, -50%) rotate(-1170deg); }
}
.face:nth-child(15) { width: 30%; height: 30%; background: #8400ff; transform: translate(-50%, -50%) rotate(140deg); animation-name: spin-14;
}
@keyframes spin-14 { 0% { transform: translate(-50%, -50%) rotate(1260deg); } 100% { transform: translate(-50%, -50%) rotate(-1260deg); }
}
.face:nth-child(16) { width: 25%; height: 25%; background: #9f00ff; transform: translate(-50%, -50%) rotate(150deg); animation-name: spin-15;
}
@keyframes spin-15 { 0% { transform: translate(-50%, -50%) rotate(1350deg); } 100% { transform: translate(-50%, -50%) rotate(-1350deg); }
}
.face:nth-child(17) { width: 20%; height: 20%; background: #bb00ff; transform: translate(-50%, -50%) rotate(160deg); animation-name: spin-16;
}
@keyframes spin-16 { 0% { transform: translate(-50%, -50%) rotate(1440deg); } 100% { transform: translate(-50%, -50%) rotate(-1440deg); }
}
.face:nth-child(18) { width: 15%; height: 15%; background: #d700ff; transform: translate(-50%, -50%) rotate(170deg); animation-name: spin-17;
}
@keyframes spin-17 { 0% { transform: translate(-50%, -50%) rotate(1530deg); } 100% { transform: translate(-50%, -50%) rotate(-1530deg); }
}
.face:nth-child(19) { width: 10%; height: 10%; background: #f200ff; transform: translate(-50%, -50%) rotate(180deg); animation-name: spin-18;
}
@keyframes spin-18 { 0% { transform: translate(-50%, -50%) rotate(1620deg); } 100% { transform: translate(-50%, -50%) rotate(-1620deg); }
}
.face:nth-child(20) { width: 5%; height: 5%; background: #ff00f0; transform: translate(-50%, -50%) rotate(190deg); animation-name: spin-19;
}
@keyframes spin-19 { 0% { transform: translate(-50%, -50%) rotate(1710deg); } 100% { transform: translate(-50%, -50%) rotate(-1710deg); }
}

Home Page	Home
Developer	Tiffany Stoik
Username	tstoik
Uploaded	November 28, 2022
Rating	3.5
Size	4,081 Kb
Views	22,264

Do you need developer help for Twirling Flower?

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!

Tiffany Stoik (tstoik) Script Codes

Name	Size
One element four color loader	2,765 Kb
Rainbow Infinity Loader	3,639 Kb
ATC Throwback Packs	9,363 Kb
Morphing Logo Concept	4,693 Kb
Chevron BG Pattern	2,374 Kb
ATC Vintage Radio Flip Clock	9,722 Kb
8-bit Hovers	146,179 Kb
Hexagon Grid	5,712 Kb
Hover Reveal Effect	4,000 Kb
Hexagon Loader	3,261 Kb

Create amazing sales emails 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!

Similar Scripts & Codes

Name	Username	Size
Parallax-ish Sliding Content	Jdsteinbach	2,748 Kb
Reading Grid	Tappily	4,306 Kb
Emberjs Bootstrap Modal Carousel	Somethingkindawierd	4,233 Kb
Html5-canvas-snow-effect	MariamMassadeh	2,609 Kb
Loading Bar	Jaradlight	2,333 Kb
Mapbox Directions with geolocation tracking	Pollardld	5,827 Kb
Blackberry Mock	Zacharyolson	1,865 Kb
Greyscale image with filter in CSS3	NickyCDK	1,562 Kb
Add This API	ThatGuySam	2,848 Kb
CSS3 Animated buttons	Cguillou	3,737 Kb

Do you want hide your ip address?

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!