Scribd
Upload
57 views

Code Pen

The document contains CSS code that defines styles for animating electron orbitals. It sets background colors and gradients, and uses CSS animations like rotate, glow and squash to simulate the movement of electrons orbiting an atom represented by nested ring div elements. Hovering on the section element triggers a transformation that scales up the orbitals to show more detail.

Uploaded by

Adrián Gonzalez
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
57 views

Code Pen

The document contains CSS code that defines styles for animating electron orbitals. It sets background colors and gradients, and uses CSS animations like rotate, glow and squash to simulate the movement of electrons orbiting an atom represented by nested ring div elements. Hovering on the section element triggers a transformation that scales up the orbitals to show more detail.

Uploaded by

Adrián Gonzalez
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

@import "compass/css3";

$electrons: #2ecc71, #3498db, #e74c3c;

html {

background-color: rgb(62,59,102);

@include background-image(radial-gradient(center, ellipse cover,


rgba(100,100,100,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 (blue,0.8);

border-top: 1.5em solid rgba (blue,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 (blue,0.3);

height: 30em;

@extend %center;

transition: 1s transform ease-in-out;

width: 30em;
div {

animation: rotate s linear infinite;

border-radius: 0%;

height: 100%;

position: relative;

width: 100%;

&:after {

animation: squash 0s linear infinite;

@include transform(scale(0,0));

border-radius: 100%;

content: '';

left: 50%;

height: 3em;

margin-left: -1.5em;

opacity: 0;

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: blue;

border-radius: 50%;

box-shadow: 0 0 20px rgba(blue,0.3);

height: 3em;
box-shadow: 0 0 10px rgba(blue,0.3), inset 0 0 20px rgba(blue,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(blue,1), 0 0 10px rgba(blue,1), inset 0 0 50px


rgba(blue,1);

50% {

box-shadow: 0 0 10px rgba(blue,1), 0 0 10px rgba(blue,1), inset 0 0 10px


rgba(blue,1);

@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(1,1);

top: -1.2em;

You might also like