Concentric Radiating Circles CSS

Developer
Kevin Bertram
Size
3,355 Kb
Views
38,456
  1. Concentric Radiating Circles CSS Previews
  2. Concentric Radiating Circles CSS HTML Codes
  3. Concentric Radiating Circles CSS CSS Codes

How do I make an concentric radiating circles css?

What is a concentric radiating circles css? How do you make a concentric radiating circles css? This script and codes were developed by Kevin Bertram on 08 September 2022, Thursday.

Concentric Radiating Circles CSS Previews
IQ Test

Concentric Radiating Circles CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Concentric Radiating Circles CSS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='c-hold'> <div class='folio'> <div class='inner'> <div class='circle violet'></div> <div class='circle indigo'></div> <div class='circle blue'></div> <div class='circle green'></div> <div class='circle yellow'></div> <div class='circle orange'></div> <div class='circle red'></div> </div> </div>
</div>
</body>
</html>

Concentric Radiating Circles CSS - Script Codes CSS Codes

* { margin: 0; padding: 0;
}
.mask { position: absolute; margin: 0 auto; left: 0; right: 0; top: 0; background: url(http://kbrtrm.com/colo-mask.png); z-index: 100; width: 220px; height: 220px; display: block; background-size: 100%;
}
.circle { width: 50px; height: 50px; border-radius: 50%; position: absolute; margin: 0 auto; z-index: 1; -webkit-animation-name: example; /* Chrome, Safari, Opera */ -webkit-animation-duration: 2s; /* Chrome, Safari, Opera */ -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */ -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */ -webkit-animation-fill-mode: both; animation-name: example; animation-duration: 8s; animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: linear;
}
.circle.red { background-color: #BE1E2D; animation-delay: 8000ms;
}
.circle.orange { background-color: #F15A29; animation-delay: 6850ms;
}
.circle.yellow { background-color: #F7E143; animation-delay: 5710ms;
}
.circle.green { background-color: #48B74D; animation-delay: 4570ms;
}
.circle.blue { background: #2B8EBF; animation-delay: 3430ms;
}
.circle.indigo { background: #3A3C97; animation-delay: 2290ms;
}
.circle.violet { background-color: #92278F; animation-delay: 1140ms;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes example { 0% { left: 0px; right: 0; top: 150px; width: 0px; height: 0px; z-index: 7; } 14% { z-index: 6; } 28% { z-index: 5; } 42% { z-index: 4; } 56% { z-index: 3; } 70% { z-index: 2; } 84% { z-index: 1; } 98% { z-index: 0; } 100% { width: 300px; height: 300px; left: 0; right: 0; top: 0; z-index: -1; }
}
/* Standard syntax */
@keyframes example { 0% { left: 0px; right: 0; top: 225px; width: 0px; height: 0px; z-index: 7; } 14% { z-index: 6; } 28% { z-index: 5; } 42% { z-index: 4; } 56% { z-index: 3; } 70% { z-index: 2; } 84% { z-index: 1; } 98% { z-index: 0; } 100% { width: 450px; height: 450px; left: 0; right: 0; top: 0; z-index: -1; }
}
.c-hold { display: block; width: 450px; height: 450px; position: relative; margin: 0 auto; overflow: hidden; margin-top: 102px; /* background: #ccc;*/
}
div.folio { width: 192px; height: 240px; /* background: #000;*/ /*background: #1e90ff;*/ -webkit-clip-path: polygon(50% 23%, 100% 0%, 100% 47%, 50% 70%, 0% 47%, 0 0%); clip-path: polygon(50% 50%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0 25%); z-index: 100; position: relative; margin-top: 40px; margin-left: 75px; /*opacity: .5;*/ overflow: hidden;
}
.inner { width: 450px; height: 450px; position: absolute; /*background: #000;*/ left: -129px; top: -57px;
}
Concentric Radiating Circles CSS - Script Codes
Concentric Radiating Circles CSS - Script Codes
Home Page Home
Developer Kevin Bertram
Username kbrtrm
Uploaded September 08, 2022
Rating 3
Size 3,355 Kb
Views 38,456
Do you need developer help for Concentric Radiating Circles CSS?

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!

Kevin Bertram (kbrtrm) Script Codes
Name
A Pen by Kevin Bertram
Just white dots in space
Basic Story Cards
Crossword Grid SCSS 15
Registration Options
Department Grids
You blockhead
Full Width Peppered
Full text preview
SAIC Campaign Styles
Create amazing art & images 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!