Atom
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 - 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;
}
Developer | Bryan Jones |
Username | bartuc |
Uploaded | July 13, 2022 |
Rating | 4 |
Size | 3,816 Kb |
Views | 103,224 |
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!
Name | Size |
Galaxy | 5,087 Kb |
3D Saturn | 5,044 Kb |
Planets | 2,959 Kb |
Cabin | 4,413 Kb |
Solar System | 3,454 Kb |
Gravity | 4,905 Kb |
Books | 5,030 Kb |
Universe Zoom | 3,574 Kb |
Vermhole | 6,053 Kb |
Solar System Maker | 3,893 Kb |
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!
Name | Username | Size |
Vanilla modal window | Jasonhowmans | 3,554 Kb |
Login with flip 3d animation | Mariusbalaj | 3,014 Kb |
Multi column experiment. | Spylefkaditis | 2,805 Kb |
BSP Dungeon Generation | Xgundam05 | 5,326 Kb |
Tree growth tests | Orchard | 3,818 Kb |
Twinkling Stars | Ripley6811 | 2,750 Kb |
Simple Login Form Template | Banunn | 3,571 Kb |
Swiftype Lower Third | Zumwalt | 4,796 Kb |
Jstam.com Home Page | Jstam | 10,558 Kb |
3d css cube | Semenchenko | 4,578 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!