Fruity Frenzy

Developer
Tina Anastopoulos
Size
3,132 Kb
Views
28,322
  1. Fruity Frenzy Previews
  2. Fruity Frenzy HTML Codes
  3. Fruity Frenzy CSS Codes

How do I make an fruity frenzy?

CSS animated rings. What is a fruity frenzy? How do you make a fruity frenzy? This script and codes were developed by Tina Anastopoulos on 31 August 2022, Wednesday.

Fruity Frenzy Previews
IQ Test

Fruity Frenzy - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fruity Frenzy</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='ringRED negative speed4000'> <div class='ringORA positive speed2000'> <div class='ringGRN negative speed1000'> <div class='ringPUR positive speed500'></div> </div> </div>
</div> <script src='https://rawgit.com/web-animations/web-animations-js/master/web-animations.min.js'></script>
</body>
</html>

Fruity Frenzy - Script Codes CSS Codes

body { background: #000;
}
div { display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: center; -webkit-justify-content: center; border-radius: 50%;
}
.ringRED { margin: auto; width: 500px; height: 500px; background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/807677/strawberries.png"); background-size: cover; border: 3px solid #B61810;
}
.ringORA { width: 350px; height: 350px; background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/807677/oranges.png"); background-size: cover; border: 3px solid #D37A20;
}
.ringGRN { width: 200px; height: 200px; background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/807677/limes.png"); border: 3px solid #085B23;
}
.ringPUR { width: 50px; height: 50px; background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/807677/blueberry-small.png"); border: 3px solid #4A75A5;
}
.positive { -webkit-animation-name: spin-pos; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin-pos; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: spin-pos; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; animation-name: spin-pos; animation-iteration-count: infinite; animation-timing-function: linear;
}
@-ms-keyframes spin-pos { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin-pos { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin-pos { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); }
}
@keyframes spin-pos { from { transform: rotate(0deg); } to { transform: rotate(360deg); }
}
.negative { -webkit-animation-name: spin-neg; -webkit-animation-duration: 4000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -moz-animation-name: spin-neg; -moz-animation-duration: 4000ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: linear; -ms-animation-name: spin-neg; -ms-animation-duration: 4000ms; -ms-animation-iteration-count: infinite; -ms-animation-timing-function: linear; animation-name: spin-neg; animation-duration: 4000ms; animation-iteration-count: infinite; animation-timing-function: linear;
}
@-ms-keyframes spin-neg { from { -ms-transform: rotate(0deg); } to { -ms-transform: rotate(-360deg); }
}
@-moz-keyframes spin-neg { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(-360deg); }
}
@-webkit-keyframes spin-neg { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(-360deg); }
}
@keyframes spin-neg { from { transform: rotate(0deg); } to { transform: rotate(-360deg); }
}
.speed4000 { -webkit-animation-duration: 4000ms; -moz-animation-duration: 4000ms; -ms-animation-duration: 4000ms; animation-duration: 4000ms;
}
.speed2000 { -webkit-animation-duration: 2000ms; -moz-animation-duration: 2000ms; -ms-animation-duration: 2000ms; animation-duration: 2000ms;
}
.speed1000 { -webkit-animation-duration: 1000ms; -moz-animation-duration: 1000ms; -ms-animation-duration: 1000ms; animation-duration: 1000ms;
}
.speed500 { -webkit-animation-duration: 500ms; -moz-animation-duration: 500ms; -ms-animation-duration: 500ms; animation-duration: 500ms;
}
Fruity Frenzy - Script Codes
Fruity Frenzy - Script Codes
Home Page Home
Developer Tina Anastopoulos
Username TWAIN
Uploaded August 31, 2022
Rating 3.5
Size 3,132 Kb
Views 28,322
Do you need developer help for Fruity Frenzy?

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!

Tina Anastopoulos (TWAIN) Script Codes
Name
Donut
People Graphic
Hexagon Fade
Floating SVG Icons
Game Boy - p5.js
Mandala Outline
Fan Loader
Crazy Eights
Web Spiral - p5.js
Cone Illusion
Create amazing love letters 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!