Difference between revisions of "Msc1G2:Test1"
From uf
Line 1: | Line 1: | ||
− | + | .particle-network-animation { | |
− | + | position: fixed; | |
+ | top: 0; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | height: 100vh; | ||
+ | background-color: #171717; | ||
+ | |||
+ | &::before { | ||
+ | z-index: -2; | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | right: 0; | ||
+ | bottom: 0; | ||
+ | left: 0; | ||
+ | // background-image: url(http://web.frfr.me/dev/world-map-optimized.jpg); | ||
+ | background-image: url(https://images.unsplash.com/photo-1450849608880-6f787542c88a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=786a67dca1d8791d181bfd90b16240d9); | ||
+ | background-position: center center; | ||
+ | background-size: cover; | ||
+ | opacity: 0.2; | ||
+ | } | ||
+ | } | ||
+ | .glow { | ||
+ | z-index: -1; | ||
+ | position: fixed; | ||
+ | top: 50%; | ||
+ | left: 50%; | ||
+ | background-image: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.025), transparent); | ||
+ | } | ||
+ | $duration: 25s; | ||
+ | .glow-1 { | ||
+ | width: 150vw; | ||
+ | height: 150vh; | ||
+ | margin-top: -75vh; | ||
+ | margin-left: -75vw; | ||
+ | animation: glow-1-move $duration linear infinite both; | ||
+ | } | ||
+ | @keyframes glow-1-move { | ||
+ | from { | ||
+ | transform: translate(-100%, 100%); | ||
+ | } | ||
+ | to { | ||
+ | transform: translate(100%, -100%); | ||
+ | } | ||
+ | } | ||
+ | .glow-2 { | ||
+ | width: 100vw; | ||
+ | height: 100vh; | ||
+ | margin-top: -50vh; | ||
+ | margin-left: -50vw; | ||
+ | animation: glow-2-move $duration linear $duration / 3 infinite both; | ||
+ | } | ||
+ | @keyframes glow-2-move { | ||
+ | from { | ||
+ | transform: translate(-100%, 0%); | ||
+ | } | ||
+ | to { | ||
+ | transform: translate(100%, 100%); | ||
+ | } | ||
+ | } | ||
+ | .glow-3 { | ||
+ | width: 120vw; | ||
+ | height: 120vh; | ||
+ | margin-top: -60vh; | ||
+ | margin-left: -60vw; | ||
+ | animation: glow-3-move $duration linear $duration / 3 * 2 infinite both; | ||
+ | } | ||
+ | @keyframes glow-3-move { | ||
+ | from { | ||
+ | transform: translate(100%, 100%); | ||
+ | } | ||
+ | to { | ||
+ | transform: translate(0%, -100%); | ||
+ | } | ||
+ | } |
Revision as of 18:59, 1 February 2018
.particle-network-animation { position: fixed; top: 0; left: 0; right: 0; height: 100vh; background-color: #171717;
&::before { z-index: -2; content: ; position: absolute; top: 0; right: 0; bottom: 0; left: 0; // background-image: url(http://web.frfr.me/dev/world-map-optimized.jpg); background-image: url(https://images.unsplash.com/photo-1450849608880-6f787542c88a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=786a67dca1d8791d181bfd90b16240d9); background-position: center center; background-size: cover; opacity: 0.2; }
} .glow {
z-index: -1; position: fixed; top: 50%; left: 50%; background-image: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.025), transparent);
} $duration: 25s; .glow-1 {
width: 150vw; height: 150vh; margin-top: -75vh; margin-left: -75vw; animation: glow-1-move $duration linear infinite both;
} @keyframes glow-1-move {
from { transform: translate(-100%, 100%); } to { transform: translate(100%, -100%); }
} .glow-2 {
width: 100vw; height: 100vh; margin-top: -50vh; margin-left: -50vw; animation: glow-2-move $duration linear $duration / 3 infinite both;
} @keyframes glow-2-move {
from { transform: translate(-100%, 0%); } to { transform: translate(100%, 100%); }
} .glow-3 {
width: 120vw; height: 120vh; margin-top: -60vh; margin-left: -60vw; animation: glow-3-move $duration linear $duration / 3 * 2 infinite both;
} @keyframes glow-3-move {
from { transform: translate(100%, 100%); } to { transform: translate(0%, -100%); }
}