Atom

Developer
Size
3,816 Kb
Views
103,224

How do I make an atom?

A CSS atom with little electrons going around it. . What is a atom? How do you make a atom? This script and codes were developed by Bryan Jones on 13 July 2022, Wednesday.

Atom Previews

Atom - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Atom</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="wrapper"> <div id="core"> <div id="ring-outer-3" class="ring"></div> <div id="ring-outer-2" class="ring"></div> <div id="ring-outer" class="ring"></div> <div id="ring-middle" class="ring"></div> <div id="ring-inner" class="ring"></div> </div>
</div>
</body>
</html>

Atom - Script Codes CSS Codes

/** * Declare keyframes. */
@-webkit-keyframes rotateX { 0% { -webkit-transform: rotate3d(1, 0, 1, 0deg); transform: rotate3d(1, 0, 1, 0deg); } 100% { -webkit-transform: rotate3d(1, 0, 1, 360deg); transform: rotate3d(1, 0, 1, 360deg); }
}
@keyframes rotateX { 0% { -webkit-transform: rotate3d(1, 0, 1, 0deg); transform: rotate3d(1, 0, 1, 0deg); } 100% { -webkit-transform: rotate3d(1, 0, 1, 360deg); transform: rotate3d(1, 0, 1, 360deg); }
}
@-webkit-keyframes rotateY { 0% { -webkit-transform: rotate3d(0, 1, 1, 0deg); transform: rotate3d(0, 1, 1, 0deg); } 100% { -webkit-transform: rotate3d(0, 1, 1, 360deg); transform: rotate3d(0, 1, 1, 360deg); }
}
@keyframes rotateY { 0% { -webkit-transform: rotate3d(0, 1, 1, 0deg); transform: rotate3d(0, 1, 1, 0deg); } 100% { -webkit-transform: rotate3d(0, 1, 1, 360deg); transform: rotate3d(0, 1, 1, 360deg); }
}
@-webkit-keyframes rotateXY { 0% { -webkit-transform: rotate3d(1, 1, 1, 0deg); transform: rotate3d(1, 1, 1, 0deg); } 100% { -webkit-transform: rotate3d(1, 1, 1, 360deg); transform: rotate3d(1, 1, 1, 360deg); }
}
@keyframes rotateXY { 0% { -webkit-transform: rotate3d(1, 1, 1, 0deg); transform: rotate3d(1, 1, 1, 0deg); } 100% { -webkit-transform: rotate3d(1, 1, 1, 360deg); transform: rotate3d(1, 1, 1, 360deg); }
}
@-webkit-keyframes rotateballX { 0% { -webkit-transform: rotate3d(1, 0, 1, 0deg); transform: rotate3d(1, 0, 1, 0deg); } 100% { -webkit-transform: rotate3d(1, 0, 1, -360deg); transform: rotate3d(1, 0, 1, -360deg); }
}
@keyframes rotateballX { 0% { -webkit-transform: rotate3d(1, 0, 1, 0deg); transform: rotate3d(1, 0, 1, 0deg); } 100% { -webkit-transform: rotate3d(1, 0, 1, -360deg); transform: rotate3d(1, 0, 1, -360deg); }
}
@-webkit-keyframes rotateballY { 0% { -webkit-transform: rotate3d(0, 1, 1, 0deg); transform: rotate3d(0, 1, 1, 0deg); } 100% { -webkit-transform: rotate3d(0, 1, 1, -360deg); transform: rotate3d(0, 1, 1, -360deg); }
}
@keyframes rotateballY { 0% { -webkit-transform: rotate3d(0, 1, 1, 0deg); transform: rotate3d(0, 1, 1, 0deg); } 100% { -webkit-transform: rotate3d(0, 1, 1, -360deg); transform: rotate3d(0, 1, 1, -360deg); }
}
@-webkit-keyframes rotateballXY { 0% { -webkit-transform: rotate3d(1, 1, 1, 0deg); transform: rotate3d(1, 1, 1, 0deg); } 100% { -webkit-transform: rotate3d(1, 1, 1, -360deg); transform: rotate3d(1, 1, 1, -360deg); }
}
@keyframes rotateballXY { 0% { -webkit-transform: rotate3d(1, 1, 1, 0deg); transform: rotate3d(1, 1, 1, 0deg); } 100% { -webkit-transform: rotate3d(1, 1, 1, -360deg); transform: rotate3d(1, 1, 1, -360deg); }
}
/** * Start Styling! */
* { box-sizing: border-box;
}
body { background-color: #aff298; min-height: 100vh; overflow: hidden; width: 100%; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFAFF298', endColorstr='#FF175B12'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IiIgcj0iOTglIj48c3RvcCBvZmZzZXQ9IjMzJSIgc3RvcC1jb2xvcj0iI2FmZjI5OCIvPjxzdG9wIG9mZnNldD0iOTglIiBzdG9wLWNvbG9yPSIjMTc1YjEyIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-radial-gradient(center, ellipse cover, #aff298 33%, #175b12 98%); background-image: -webkit-radial-gradient(ellipse cover at center, #aff298 33%, #175b12 98%); background-image: radial-gradient(ellipse cover at center, #aff298 33%, #175b12 98%);
}
#wrapper { position: absolute; left: 50%; top: 50%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
.ring { background-color: transparent; border: 1px solid #500; position: absolute; border-radius: 50%;
}
.ring::after { background-color: #f00; border: 1px solid #000; content: ""; height: 35px; height: 1.5vw; left: calc(50% - 0.75vw); top: -0.75vw; position: absolute; width: 35px; width: 1.5vw; border-radius: 50%;
}
.ring::before { background-color: #f00; border: 1px solid #000; content: ""; height: 35px; height: 1.5vw; left: calc(50% - 0.75vw); bottom: -0.75vw; position: absolute; width: 35px; width: 1.5vw; border-radius: 50%;
}
#ring-outer-3 { height: 200px; height: 36vw; left: calc(50% - 18vw); top: calc(50% - 18vw); width: 200px; width: 36vw; -webkit-animation: rotateY 6s linear infinite; animation: rotateY 6s linear infinite; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
#ring-outer-3::after { -webkit-animation: rotateballY 6s linear infinite; animation: rotateballY 6s linear infinite;
}
#ring-outer-3::before { -webkit-animation: rotateballY 6s linear infinite; animation: rotateballY 6s linear infinite;
}
#ring-outer-2 { height: 200px; height: 30vw; left: calc(50% - 15vw); top: calc(50% - 15vw); width: 200px; width: 30vw; -webkit-animation: rotateXY 5s linear infinite; animation: rotateXY 5s linear infinite; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
#ring-outer-2::after { -webkit-animation: rotateballXY 5s linear infinite; animation: rotateballXY 5s linear infinite;
}
#ring-outer-2::before { -webkit-animation: rotateballXY 5s linear infinite; animation: rotateballXY 5s linear infinite;
}
#ring-outer { height: 200px; height: 24vw; left: calc(50% - 12vw); top: calc(50% - 12vw); width: 200px; width: 24vw; -webkit-animation: rotateX 4s linear infinite; animation: rotateX 4s linear infinite; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
#ring-outer::after { -webkit-animation: rotateballX 4s linear infinite; animation: rotateballX 4s linear infinite;
}
#ring-outer::before { -webkit-animation: rotateballX 4s linear infinite; animation: rotateballX 4s linear infinite;
}
#ring-middle { height: 150px; height: 18vw; left: calc(50% - 9vw); top: calc(50% - 9vw); width: 150px; width: 18vw; -webkit-animation: rotateY 3.5s linear infinite; animation: rotateY 3.5s linear infinite; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
#ring-middle::after { -webkit-animation: rotateballY 3.5s linear infinite; animation: rotateballY 3.5s linear infinite;
}
#ring-middle::before { -webkit-animation: rotateballY 3.5s linear infinite; animation: rotateballY 3.5s linear infinite;
}
#ring-inner { height: 100px; height: 12vw; left: calc(50% - 6vw); top: calc(50% - 6vw); width: 100px; width: 12vw; -webkit-animation: rotateXY 3s linear infinite; animation: rotateXY 3s linear infinite; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
#ring-inner::after { -webkit-animation: rotateballXY 3s linear infinite; animation: rotateballXY 3s linear infinite;
}
#ring-inner::before { -webkit-animation: rotateballXY 3s linear infinite; animation: rotateballXY 3s linear infinite;
}
#core { background-color: #d99; height: 50px; height: 8vw; left: calc(50% - 4vw); position: absolute; top: calc(50% - 4vw); width: 50px; width: 8vw; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjAlIiBjeT0iMCUiIHI9Ijk4JSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIvPjxzdG9wIG9mZnNldD0iOTglIiBzdG9wLWNvbG9yPSIjMTEwMDAwIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-radial-gradient(top left, ellipse cover, #ff0000 0%, #110000 98%); background-image: -webkit-radial-gradient(ellipse cover at top left, #ff0000 0%, #110000 98%); background-image: radial-gradient(ellipse cover at top left, #ff0000 0%, #110000 98%); border-radius: 50%; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFFF0000', endColorstr='#FF000000'); -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
Atom - Script Codes
Atom - Script Codes
Home Page Home
Developer Bryan Jones
Username bartuc
Uploaded July 13, 2022
Rating 4
Size 3,816 Kb
Views 103,224
Do you need developer help for Atom?

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!

Bryan Jones (bartuc) Script Codes
Name
Galaxy
3D Saturn
Planets
Cabin
Solar System
Gravity
Books
Universe Zoom
Vermhole
Solar System Maker
Create amazing captions 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!