⚛️ How To Make Atom Animation using HTML & CSS: A Quick & Easy Guide

? Please leave a LIKE ? and SUBSCRIBE for more AMAZING content! ?

In this video, I'm going to show you how to make an atom rotating animation with CSS. This is a quick & easy guide that will help you create a beautiful atom-rotating animation in no time!

If you're looking for a quick and easy way to create beautiful Atom animations, then this video is for you! In just a few minutes, you'll be able to create a stunning atom-rotating animation using CSS. This technique is easy to follow and will give your web projects a real professional look!

? CREATOR: Ma Ýes

?Get in touch with me :
LinkedIn - https://www.linkedin.com/in/mayes243
GitHub - https://github.com/mayes243

⌚ Timestamps:
00:01 - Demo
00:09 - Start
00:45 - Full HTML
00:47 - CSS start
02:59 - line1 Animation
04:09 - line2 Animation
05:11 - line3 Animation
05:35 - Final Result

PRODUCED BY: BEAT_26
✅ music credit
https://youtu.be/rKehuv9khd4

▶️ PLAYLIST:
Udemy clone: https://www.youtube.com/watch?v=WHoFt0Kbkmc&list=PLMpdYrPeqzHrWRY85RFBNEMJ0E34ilORQ&index=1&t=0s


?️ Tags:
#htmlandcss
#animation
#protips
#html
#css
#atom


SOURCE CODE:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: radial-gradient(#113, #000);
}
.atom {
position: relative;
display: flex;
height: 300px;
width: 300px;
align-items: center;
justify-content: center;
}
.atom::before {
content: "";
position: absolute;
width: 20px;
height: 20px;
background: transparent;
box-shadow: inset 0 0 10px #fff;
border-radius: 50%;
}
.line {
width: 100%;
height: 100%;
position: absolute;
opacity: 0.7;
}
.line-1 {
--color: #40ff9c;
width: 100%;
height: 100%;
border-radius: 50%;
border-bottom: 10px solid var(--color);
border-top: 10px solid var(--color);
animation: line1 2s linear infinite;
filter: drop-shadow(0 0 10px var(--color));
}

@keyframes line1 {
0% {
transform: rotateY(70deg) rotateZ(0deg);
}
100% {
transform: rotateY(70deg) rotateZ(360deg);
}
}

.line-2 {
--color: #0ff;
width: 100%;
height: 100%;
border-radius: 50%;
border-bottom: 10px solid var(--color);
border-top: 10px solid var(--color);
animation: line2 2s linear infinite;
filter: drop-shadow(0 0 10px var(--color));
}
@keyframes line2 {
0% {
transform: rotateX(80deg) rotateY(25deg) rotateZ(0deg);
}
100% {
transform: rotateX(80deg) rotateY(25deg) rotateZ(360deg);
}
}
/* line 3 */
.line-3 {
--color: #c096ff;
width: 100%;
height: 100%;
border-radius: 50%;
border-bottom: 10px solid var(--color);
border-top: 10px solid var(--color);
filter: drop-shadow(0 0 10px var(--color));
animation: line3 2s linear infinite;
}
@keyframes line3 {
0% {
transform: rotateX(-80deg) rotateY(25deg) rotateZ(0deg);
}
100% {
transform: rotateX(-80deg) rotateY(25deg) rotateZ(360deg);
}
}