⚛️ 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
• No copyright Nepali music ||Suntalim...
▶️ PLAYLIST:
Udemy clone: • Udemy Clone (Project Setup) part 1 us...
🏷️ 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);
}
}
Watch video ⚛️ How To Make Atom Animation using HTML & CSS: A Quick & Easy Guide online without registration, duration hours minute second in high quality. This video was added by user Savvy Programmer 03 December 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 821 once and liked it 31 people.