|
|
Line 3: |
Line 3: |
| <html> | | <html> |
| <style> | | <style> |
− | .particle-network-animation {
| + | *{ |
− | position: fixed;
| + | -webkit-box-sizing: border-box; |
− | top: 0;
| + | box-sizing: border-box; |
− | 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 {
| + | html, body{ |
− | z-index: -1;
| + | height: 100%; |
− | position: fixed;
| + | margin: 0; |
− | top: 50%;
| + | padding: 0; |
− | left: 50%;
| + | background-color: #333; |
− | background-image: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.025), transparent);
| + | overflow: hidden; |
| } | | } |
− | $duration: 25s;
| + | canvas{ |
− | .glow-1 {
| + | background-color: #000; |
− | 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%);
| + | |
− | }
| + | |
| } | | } |
| </style> | | </style> |