Animated Atom Logo

Developer
Hugo DarbyBrown
Size
5,901 Kb
Views
70,840
  1. Animated Atom Logo Previews
  2. Animated Atom Logo HTML Codes
  3. Animated Atom Logo CSS Codes

How do I make an animated atom logo?

What is a animated atom logo? How do you make a animated atom logo? This script and codes were developed by Hugo DarbyBrown on 09 August 2022, Tuesday.

Animated Atom Logo Previews
IQ Test

Animated Atom Logo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Atom Logo</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/f179d14c2abbc7184a84c52bf.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import "compass/css3";
$electrons: #2ecc71, #3498db, #e74c3c;
html { background-color: rgb(62,59,102); @include background-image(radial-gradient(center, ellipse cover, rgba(62,59,102,1) 0%,rgba(0,0,0,1) 100%)); height: 100%; overflow: hidden;
}
section { cursor: pointer;
}
[class*="ring"] { animation: glow 3s linear infinite; border-radius: 50%; border: 0.6em solid rgba(white,0.8); border-top: 1.5em solid rgba(white,0.8); border-bottom: 1.5em solid rgba(white,0.8); box-shadow: 0 0 10px rgba(white,0.3), inset 0 0 20px rgba(white,0.3); height: 30em; @extend %center; transition: 1s transform ease-in-out; width: 30em; div { animation: rotate 2s linear infinite; border-radius: 50%; height: 100%; position: relative; width: 100%; &:after { animation: squash 2s linear infinite; @include transform(scale(3,1)); border-radius: 50%; content: ''; left: 50%; height: 3em; margin-left: -1.5em; opacity: 0.8; position: absolute; top: -1.2em; width: 3em; } }
}
@for $i from 1 through 3 { .ring#{$i} { transform: rotate($i * 120deg) scale(0.333,1); div:after { background: nth($electrons, $i); box-shadow: 0 0 20px nth($electrons, $i); } section:hover & { border: 0.6em solid rgba(white,0.8); transform: rotate(0deg) scale($i/3,$i/3) perspective(600px) rotateX(60deg); div:after { animation: none; top: -1.6em; transform: scale(1,1); } } }
}
.center { background: white; border-radius: 50%; box-shadow: 0 0 20px rgba(white,0.3); height: 3em; box-shadow: 0 0 10px rgba(white,0.3), inset 0 0 20px rgba(white,0.3); @extend %center; transition: 1s transform ease-in-out; width: 3em; section:hover & { transform: translate(0, 0.5em); }
}
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 rgba(white,0.2), 0 0 10px rgba(white,0.2), inset 0 0 20px rgba(white,0.3); } 50% { box-shadow: 0 0 10px rgba(white,0.2), 0 0 30px rgba(white,0.2), inset 0 0 20px rgba(white,0.3); }
}
@keyframes rotate { 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); }
}
@keyframes squash { 0%,50%, 100%{ transform: scale(1,1); top: -2.6em; } 25%, 75%{ transform: scale(2,1); top: -1.2em; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <section> <div class="center"></div> <article class="ring1"> <div></div> </article> <article class="ring2"> <div></div> </article> <article class="ring3"> <div></div> </article>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Animated Atom Logo - Script Codes CSS Codes

@import "compass/css3";
$electrons: #2ecc71, #3498db, #e74c3c;
html { background-color: rgb(62,59,102); @include background-image(radial-gradient(center, ellipse cover, rgba(62,59,102,1) 0%,rgba(0,0,0,1) 100%)); height: 100%; overflow: hidden;
}
section { cursor: pointer;
}
[class*="ring"] { animation: glow 3s linear infinite; border-radius: 50%; border: 0.6em solid rgba(white,0.8); border-top: 1.5em solid rgba(white,0.8); border-bottom: 1.5em solid rgba(white,0.8); box-shadow: 0 0 10px rgba(white,0.3), inset 0 0 20px rgba(white,0.3); height: 30em; @extend %center; transition: 1s transform ease-in-out; width: 30em; div { animation: rotate 2s linear infinite; border-radius: 50%; height: 100%; position: relative; width: 100%; &:after { animation: squash 2s linear infinite; @include transform(scale(3,1)); border-radius: 50%; content: ''; left: 50%; height: 3em; margin-left: -1.5em; opacity: 0.8; position: absolute; top: -1.2em; width: 3em; } }
}
@for $i from 1 through 3 { .ring#{$i} { transform: rotate($i * 120deg) scale(0.333,1); div:after { background: nth($electrons, $i); box-shadow: 0 0 20px nth($electrons, $i); } section:hover & { border: 0.6em solid rgba(white,0.8); transform: rotate(0deg) scale($i/3,$i/3) perspective(600px) rotateX(60deg); div:after { animation: none; top: -1.6em; transform: scale(1,1); } } }
}
.center { background: white; border-radius: 50%; box-shadow: 0 0 20px rgba(white,0.3); height: 3em; box-shadow: 0 0 10px rgba(white,0.3), inset 0 0 20px rgba(white,0.3); @extend %center; transition: 1s transform ease-in-out; width: 3em; section:hover & { transform: translate(0, 0.5em); }
}
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 rgba(white,0.2), 0 0 10px rgba(white,0.2), inset 0 0 20px rgba(white,0.3); } 50% { box-shadow: 0 0 10px rgba(white,0.2), 0 0 30px rgba(white,0.2), inset 0 0 20px rgba(white,0.3); }
}
@keyframes rotate { 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); }
}
@keyframes squash { 0%,50%, 100%{ transform: scale(1,1); top: -2.6em; } 25%, 75%{ transform: scale(2,1); top: -1.2em; }
}
Animated Atom Logo - Script Codes
Animated Atom Logo - Script Codes
Home Page Home
Developer Hugo DarbyBrown
Username hugo
Uploaded August 09, 2022
Rating 4.5
Size 5,901 Kb
Views 70,840
Do you need developer help for Animated Atom Logo?

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!

Hugo DarbyBrown (hugo) Script Codes
Name
Scroll Overflow Menu
Shade - Shadow Mixin
Iron Man Login Form
Greyscale Magnifying glass effect
Trello style subtle rotate for sortable items
SCSS version of Meta Fizzy
80s Retro spinning cube
Zocial Buttons
DNA Double Helix
Concept mobile navigation
Create amazing art & images 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!