Difference between revisions of "Msc1G2:Test1"

From uf
Jump to: navigation, search
Line 1: Line 1:
<p data-height="265" data-theme-id="0" data-slug-hash="OVEeqK" data-default-tab="css,result" data-user="jkiss" data-embed-version="2" data-pen-title="Particles Random Moving in Canvas" class="codepen">See the Pen <a href="https://codepen.io/jkiss/pen/OVEeqK/">Particles Random Moving in Canvas</a> by -木马人- (<a href="https://codepen.io/jkiss">@jkiss</a>) on <a href="https://codepen.io">CodePen</a>.</p>
+
.particle-network-animation {
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
+
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%);
 }

}