⚛️ 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);
}
}
Смотрите видео ⚛️ How To Make Atom Animation using HTML & CSS: A Quick & Easy Guide онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Savvy Programmer 03 Декабрь 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 82 раз и оно понравилось 3 людям.