LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code





Place the white square in the container
CSS
 body {
 background-color: #191f27;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

#img {
 background: #fff;
 position: relative;
 padding: 0px;
 outline: 0;
 border: 0;
}



img.displayed {
 display: block;
 margin-left: auto;
 margin-right: auto;
 margin-top: 80px;
}

#box {
 width: 100px;
 height: 100px;
 border: solid 1px #fff;
 margin: 0 auto;
}


#message {
 font-family: 'Open Sans', sans-serif;
 font-size: 22px;
 color: #fff;
 padding: 10px;
 margin-top: 20px;
}

#ps {
 font-family: 'Open Sans', sans-serif;
 font-size: 14px;
 color: #ffffff;
 margin-top: 5px;
 opacity: 0.4;
}


#HjelmPatrik {
 font-family: 'Open Sans', sans-serif;
 font-size: 12px;
 color: #fff;
 margin-top: 200px;
 gutter: 10px;
 bottom: 0;
 text-decoration: none;
 opacity: 0.7;
}

#HjelmPatrik:hover {
 opacity: 0.9;
}

#Tweet {
 font-family: 'Open Sans', sans-serif;
 font-size: 12px;
 color: #fff;
 margin-top: 10px;
 gutter: 10px;
 text-decoration: none;
 font-weight: bold;
 opacity: 0.7;
 bottom: 0;
}

#Tweet:hover {
 opacity: 0.9;
}




/* Webkit-animation, box fade-in */

@-webkit-keyframes fade-in {

 0% {
  opacity: 0;
 }

 50% {
  opacity: 0;
 }

 100% {
  opacity: 1;
 }
}

@-moz-keyframes fade-in {

 0% {
  opacity: 0;
 }

 50% {
  opacity: 0;
 }

 100% {
  opacity: 1;
 }
}

@-o-keyframes fade-in {

 0% {
  opacity: 0;
 }

 50% {
  opacity: 0;
 }

 100% {
  opacity: 1;
 }
}

@-keyframes fade-in {

 0% {
  opacity: 0;
 }

 50% {
  opacity: 0;
 }

 100% {
  opacity: 1;
 }
}


#box {

 -webkit-animation-name: fade-in;

 -webkit-animation-duration: 2.5s;

 -moz-animation-name: fade-in;

 -moz-animation-duration: 2.5s;

 -o-animation-name: fade-in;

 -o-animation-duration: 2.5s;

 -animation-name: fade-in;

 -animation-duration: 2.5s;
JS
jQuery(function($) {
    $('#img').mouseover(function() {
        var dWidth = $(document).width() - 100,
            dHeight = $(document).height() - 100, 
            nextX = Math.floor(Math.random() * dWidth),
            nextY = Math.floor(Math.random() * dHeight);
        $(this).animate({ left: nextX + 'px', top: nextY + 'px' });
      });
});
Host Instantly Drag and Drop Website Builder

 

Term
Mon, 11/27/2017 - 22:02

Related Codes

Pen ID
Pen ID
Pen ID