Atomic

Developer
Richard
Size
2,098 Kb
Views
62,744
  1. Atomic Previews
  2. Atomic HTML Codes
  3. Atomic CSS Codes

How do I make an atomic?

A pure CSS Atomic symbol.. What is a atomic? How do you make a atomic? This script and codes were developed by Richard on 02 August 2022, Tuesday.

Atomic Previews
IQ Test

Atomic - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Atomic</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="atomic"> <div id="innerBlackCircle"> <div id="innerYellowCircle"></div> </div> <div id="yellowWrapper"> <div id="pieSliceBlue" class="slice"><div class="atomic-section"></div></div> <div id="pieSliceBlue2" class="slice"><div class="atomic-section"></div></div> <div id="pieSliceBlue3" class="slice"><div class="atomic-section"></div></div> </div>
</div>
</body>
</html>

Atomic - Script Codes CSS Codes

html {background-color:#99AB6D;} .atomic { font-size: 2.5em; /*CHANGE TO SCALE SYMBOL*/	height: 6em;	width: 6em;	background-color: black;	border-radius: 50%;	position: absolute;	right: 0;	left: 0;	top: 0;	bottom: 0;	margin: auto;	transform: rotate(30deg); /*	-webkit-animation: spin 5s infinite; -moz-animation: spin 5s infinite; -o-animation: spin 5s infinite; animation: spin 2s infinite; */ } .atomic-section { position: absolute; width: 5em; height: 5em; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; clip: rect(0px, 2.5em, 5em, 0px); } .slice { position: absolute; width: 5em; height: 5em; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; clip: rect(0px, 5em, 5em, 2.5em); } .atomic-yellow { background-color: #F1CD43; } #yellowWrapper { width: 5em;	height: 5em;	margin: auto;	position: absolute;	z-index: 1;	right: 0;	left: 0;	top: 0;	bottom: 0; } #pieSliceBlue { -webkit-transform:rotate(60deg); -moz-transform:rotate(60deg); -o-transform:rotate(60deg); transform:rotate(60deg); } #pieSliceBlue .atomic-section { background-color: yellow; -webkit-transform:rotate(60deg); -moz-transform:rotate(60deg); -o-transform:rotate(60deg); transform:rotate(60deg); } #pieSliceBlue2 { -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); } #pieSliceBlue2 .atomic-section { background-color: yellow; -webkit-transform:rotate(60deg); -moz-transform:rotate(60deg); -o-transform:rotate(60deg); transform:rotate(60deg); } #pieSliceBlue3 { -webkit-transform:rotate(300deg); -moz-transform:rotate(300deg); -o-transform:rotate(300deg); transform:rotate(300deg); } #pieSliceBlue3 .atomic-section { background-color: yellow; -webkit-transform:rotate(60deg); -moz-transform:rotate(60deg); -o-transform:rotate(60deg); transform:rotate(60deg); }	#innerBlackCircle {	background-color: black;	width: 2em;	height: 2em;	z-index: 5;	border-radius: 50%;	position: absolute;	margin: auto;	right: 0;	left: 0;	top: 0;	bottom: 0;	}	#innerYellowCircle {	background-color: yellow;	width: 1em;	height: 1em;	border-radius: 50%;	position: absolute;	margin: auto;	right: 0;	left: 0;	top: 0;	bottom: 0;	}	@-webkit-keyframes spin {	0% { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); } 50% { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); }	}	@-moz-keyframes NAME-YOUR-ANIMATION { 25% { opacity: 0; } 100% { opacity: 1; }	}	@-o-keyframes NAME-YOUR-ANIMATION { 0% { opacity: 0; } 100% { opacity: 1; }	}	@keyframes NAME-YOUR-ANIMATION { 0% { opacity: 0; } 100% { opacity: 1; }	}
Atomic - Script Codes
Atomic - Script Codes
Home Page Home
Developer Richard
Username Ketziel
Uploaded August 02, 2022
Rating 3
Size 2,098 Kb
Views 62,744
Do you need developer help for Atomic?

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!

Richard (Ketziel) Script Codes
Name
Animated Book
A Pen by Richard
CSS Icon Collection
CSSman
Simple Responsive Image Grid
CSS Plus Sign
Colour Schemes
CSS Styled Select Box
Moon Orbit
Responsive Image Grid with set Height
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!