Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
CSS Slime Attack
#1
Es una atractiva animación, el cuál le podes dar el uso que quieras, por ejemplo para una página de Error 404.

El alien da vueltas por la página sin sentido alguno.

HTML(haml):

Código:
%input{:type=>"checkbox", :class=>"fly-1", :id=>"fly-1", :tabindex=>"-1"}
%label{:for=>"fly-1"}

%input{:type=>"checkbox", :class=>"fly-2", :id=>"fly-2", :tabindex=>"-1"}
%label{:for=>"fly-2"}

%input{:type=>"checkbox", :class=>"fly-3", :id=>"fly-3", :tabindex=>"-1"}
%label{:for=>"fly-3"}

.description
 %h1 CSS Slime Attacks
 %p Save CodePen From Slime Invasion
 
.congrats
 %h1 Awesome!<br />You're A Click Hero!

CSS (SCSS):

Código:
@import url(http://fonts.googleapis.com/css?family=VT323);
//=======================================
// things to reuse later
//=======================================
$blue:#071321;
$green:#29FF6A;

// ------- size of each item
$size:10rem;
@mixin size($size) {
 width:$size;
 height:$size;
}

// ------- the basic duration - will gets faster each time
// 600s is easy / 200s was my personal limit
$duration:400s;

// number of ufos
$numbers:"1", "2", "3";

//=======================================
// general stuff and background
//=======================================
*, *:before, *:after {
 margin:0;
 padding:0;
 box-sizing:border-box;
}
html, body {
 width:100%;
 height:100%;
}
body {
 overflow:hidden;
 color:$green;
 font-family: 'VT323';
 cursor:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/pointer.svg), auto;
 background-color:$blue;
 background-image:
  radial-gradient(transparent, $blue), url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJFYmVuZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0aD0iOXB4IiBoZWlnaHQ9IjlweCIgdmlld0JveD0iMCAwIDkgOSIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOSA5IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHBvbHlnb24gZmlsbD0iIzJFM0I0MSIgcG9pbnRzPSIwLDIuMTIxIDYuODc5LDkgOSw5IDksNi44NzkgMi4xMjEsMCAwLDAgIi8+Cjxwb2x5Z29uIGZpbGw9IiMyRTNCNDEiIHBvaW50cz0iOSwwIDYuODc5LDAgOSwyLjEyMSAiLz4KPHBvbHlnb24gZmlsbD0iIzJFM0I0MSIgcG9pbnRzPSIyLjE1Miw5IDAsNi44NDggMCw5ICIvPgo8L3N2Zz4K");
 background-size:cover, 3px 3px;
 transform:translateZ(0);
}

//=======================================
// setup checkboxes and label
//=======================================
input[class^="fly"],
input[class^="fly"] + label {
 position:absolute;
 top:-20rem;
 left:-20rem;
 @include size($size);
 transition:opacity .5s;
 animation-play-state:running;
}
// ------- hiding the inputs
input[class^="fly"] {opacity:0;}

// ------- animating the first ufo
input[class$="-1"],
input[class$="-1"] + label {
 animation:fly1 $duration infinite linear;
}

// ------- if a ufo gets clicked, make the next one smaler and faster
@for $i from 1 to 3 {
 input[class$="#{$i}"]:checked ~ input[class$="#{$i + 1}"],
 input[class$="#{$i}"]:checked ~ input[class$="#{$i + 1}"] + label {
   @include size($size/($i+1));
   animation:fly#{$i +1} ($duration / ($i + 2 )) infinite linear;
 }
}

// ------- if a ufo is :checked hide it
input[class^="fly"]:checked,
input[class^="fly"]:checked + label {
 opacity:0;
 background-size:150%, 0%;
 box-shadow:0 0 10rem rgba($green, 1);
 pointer-events:none;
 animation-play-state:paused;
}

// ------- ufo
input[class^="fly"] + label {
 @include size($size);
 background-image:
   radial-gradient($green, $green 50%, transparent 60%),
   url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/Slime.svg);
 background-size:0%, 80%;
 background-position:50%;
 background-repeat:no-repeat;
 border-radius:50%;
 opacity:1;
 cursor:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/46992/pointer.svg), auto;
 box-shadow:0 0 10rem rgba($green, 0);
 transition:background-size .15s, box-shadow .2s, opacity .1s .1s;
}

// ------- setting a different animation for each ufo
@each $number in $numbers {
 @keyframes fly#{$number} {
   @for $i from 0 to 100 {
     #{$i * 1%} {
       top:random(100) * 1%;
       left:random(100) * 1%;
     }
   }
 }
}

//=======================================
// discription and congrats
//=======================================
.description,
.congrats {
 position:absolute;
 top:50%;
 left:50%;
 width:100%;
 z-index:9;
 padding:0 2rem;
 text-align:center;
 user-select:none;
 transform:translateX(-50%) translateY(-50%);
}
h1 {
 font-weight:normal;
 font-size:3rem;
 text-shadow:0 0 3rem rgba($green, .6);
}
p {
 font-size:1.5rem;
}
.congrats {opacity:0;}
.description {animation:fade-out 1s 3s forwards;}
input[class="fly-3"]:checked ~ .congrats {animation:fade-in 1s .5s forwards;}

@keyframes fade-out {
 60% {top:55%;}
 100% {top:-10%;}
}
@keyframes fade-in {
 100% {opacity:1;}
}


Les dejo una demo, ahí tienen al creador de esto Guiño

http://codepen.io/Hornebom/details/ertdf/
WWW




Usuarios navegando en este tema: 1 invitado(s)