Variation on first rotating frames

Developer
Mark Santiago
Size
2,235 Kb
Views
4,048
  1. Variation on first rotating frames Previews
  2. Variation on first rotating frames HTML Codes
  3. Variation on first rotating frames CSS Codes

How do I make an variation on first rotating frames?

Started with rotating square frames to practice keyframes and :before and :after. Now, working with adding more animation layers and color changes. . What is a variation on first rotating frames? How do you make a variation on first rotating frames? This script and codes were developed by Mark Santiago on 02 November 2022, Wednesday.

Variation on first rotating frames Previews
IQ Test

Variation on first rotating frames - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Variation on first rotating frames</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="test"><p>Hi there</p></div>
</body>
</html>

Variation on first rotating frames - Script Codes CSS Codes

body{}
.test{ width: 500px; height: 500px; position: relative; margin:0 auto; margin-top:200px; border:50px solid; padding:10px; -webkit-animation:Clovers1 5s infinite; border-radius:50%; -webkit
}
.test:before{ border:50px solid; width:610px; height:610px; position:absolute; z-index:-1; content: ""; right:-100px; top:-100px; display: inline-block; /* -webkit-transform:rotate(30deg); */ -webkit-animation:clockwise 20s infinite; -webkit-animation:Clovers2 5s infinite; -Webkit-animation-name: clockwise ,Clovers2 ; -Webkit-animation-duration: 20s,30s; } .test:after
{ border:50px solid; width:420px; height:420px; position:absolute; z-index:-2; content: ""; top:0px; right:0px; display: inline-block; /* -webkit-transform:rotate(230deg); */ -webkit-animation:counter-clockwise 30s infinite; -webkit-animation:Clovers1 10s infinite;
-Webkit-animation-name: counter-clockwise ,Clovers2 ; -Webkit-animation-duration: 30s,20s;
}
p{ border:50px solid; position:relative; top:10px; right:-40px; text-align:center; width:320px; height:180px; padding-top:140px; z-index:0; display: inline-block; /* border-radius:100%; */ font-size:30px; -webkit-animation:Clovers2 30s infinite;
}
p:before{ border:50px solid; width:220px; height:220px; position:absolute; z-index:2; content: ""; top:0px; right:0px; display: inline-block; /* -webkit-transform:rotate(30deg); */ -webkit-animation:clockwise 30s infinite; -webkit-animation:Clovers1 15s infinite;
-Webkit-animation-name: clockwise ,Clovers1 ; -Webkit-animation-duration: 15s,30s;
}
p:after{ border:55px solid; width:120px; height:120px; position:absolute; z-index:-2; content: ""; top:50px; right:50px; display: inline-block; /* -webkit-transform:rotate(160deg); */ -webkit-animation:counter-clockwise 20s infinite; -webkit-animation:Clovers2 15s infinite; -Webkit-animation-name: counter-clockwise ,Clovers2 ; -Webkit-animation-duration: 20s,15s;
}
/* @-webkit-keyframes clockwise { from { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes counter-clockwise { from { -webkit-transform: rotate(360deg); transform: rotate(360deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } }
/*palatte from colourlovers.com/palette/3159053/forgot */
@-webkit-keyframes Clovers1 { 0%{ border-color:#69D2E7 ; } 20%{border-color:#A7DBD8 } 40%{ border-color:#E0E4CC ; } 60%{border-color:#EF38630 } 80%{border-color:#FA6900 } 100%{ border-color:#A7DBD8; } }
@-webkit-keyframes Clovers2 { 0%{ border-color:#FA6900 ; } 20%{border-color:#F38630 ; } 40%{border-color:#E0E4CC ; } 60%{ border-color:#A7DBD8 ;} 80%{border-color:#69D2E7 ; } 100%{ border-color:#FA6900 ; } }
Variation on first rotating frames - Script Codes
Variation on first rotating frames - Script Codes
Home Page Home
Developer Mark Santiago
Username msantiago1256
Uploaded November 02, 2022
Rating 3
Size 2,235 Kb
Views 4,048
Do you need developer help for Variation on first rotating frames?

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!

Mark Santiago (msantiago1256) Script Codes
Name
Work in progress...
CSS Nav ideas to show team
Playing with user.me user generator
Playing with pseudo and animate
Showing the class some basics
Bootcamp Day 1
Dribbble 2 CSS relaxer
Cute Wolverine CSS
Working out an idea for a site design...
A Pen by Mark Santiago
Create amazing video scripts 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!