Memasang kode Fish flocking simulation
Kode ini menampilkan animasi ikan berkelompok. Untuk menerapkan kode tersebut
Langkah awal Login ke akun blog klik tombol blog baru buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai
Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<style>
      body {
 background: #000;
 overflow:hidden;
   background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLbSjPVBOO_9BlIsG_0w85t1d6P1fLns3oHzfslmk7L0owcf9rTU92fGnkKu_nHNITbwBxIp-y7wVnos0WEvHwNBZCVbxisSRW00vE-eEP6xQGgywEnphopzRse53LIoFz2JYXRabwZqo/s1600-r/bg-mys2010.jpg') no-repeat center center fixed;
 background-size:cover;
}
.container {
  position:absolute;
 left: 50%;
 margin-left: -700px;
  top: 50%;
  margin-top: -300px;
  height: 600px;
 width: 1400px;
}
* {
 margin: 0;
 padding: 0;
}
#fishbitmap {
 display: none;
}
    </style>

<script>
  window.console = window.console || function(t) {};
</script>

<div class="container">
<canvas width="1400" height="600" id="fishtank">
</div>
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js"></script>


<script>
      /* ---------------- FISH "CLASS" START -------------- */
var FOLLOW_DISTANCE = 100;
var Fish = function(id) {
 this.id = id;
 this.entourage = [];
 // dx/yx is current speed, ox/oy is the previous one
 this.ox = this.dx = Math.random() - 0.5;
 this.oy = this.dy = Math.random() - 0.5;
 this.x = canvas.width * Math.random();
 this.y = canvas.height * Math.random();
 // A couple of helper functions, the names should describe their purpose
 Fish.prototype.angleToClosestFish = function(otherFish) {
  otherFish = otherFish == null ? this.following : otherFish;
  if (otherFish) {
   return Math.atan2(otherFish.y - this.y, otherFish.x - this.x);
  } else {
   return Number.MAX_VALUE;
  }
 }
 Fish.prototype.angleFromFishDirectionToClosestFish = function(otherFish) {
  otherFish = otherFish == null ? this.following : otherFish;
  if (otherFish) {
   return Math.abs(deltaAngle(this.angle, this.angleToClosestFish(otherFish)));
  } else {
   return Number.MAX_VALUE;
  }
 }
 Fish.prototype.angleDirectionDifference = function(otherFish) {
  otherFish = otherFish == null ? this.following : otherFish;
  if (otherFish) {
   Math.abs(deltaAngle(this.angle, otherFish.angle));
  } else {
   return Number.MAX_VALUE;
  }
 }
 // Update the fish "physics"
 Fish.prototype.calc = function() {
  this.ox = this.dx;
  this.oy = this.dy;
  var MAX_SPEED = 1.1;
  var maxSpeed = MAX_SPEED;
  //Do I need to find another fish buddy?
  if (this.following == null || py(this.x - this.following.x, this.y - this.following.y) > FOLLOW_DISTANCE) {
   if (this.following != null) {
    if (keyDown) affinityLine(this.following, this, "white");    this.following.entourage.splice(this.following.entourage.indexOf(this));
   }
   this.following = null;
   //attract closer to other fish - find closest
   var closestDistance = Number.MAX_VALUE;
   var closestFish = null;
   for (var i = 0; i < fishes.length; i++) {
    var fish = fishes[i];
    if (fish != this) {
     var distance = py(this.x - fish.x, this.y - fish.y);
     // Is it closer, within the max distance and within the sector that the fish can see?
     if (distance < closestDistance && fish.following != this && distance < FOLLOW_DISTANCE && this.angleFromFishDirectionToClosestFish(fish) < Math.PI * 0.25) {
      closestDistance = distance;
      closestFish = fish;
     }
    }
   }
   if (closestFish != null) {
    this.following = closestFish;
    closestFish.entourage.push(this);
   }
  }
  // Fish is following another
  if (this.following != null) {
   // Go closer to other fish
   this.followingDistance = py(this.x - this.following.x, this.y - this.following.y);
   this.distanceFactor = 1 - this.followingDistance / FOLLOW_DISTANCE;
   // If going head on, just break a little before following
   if (this.angleDirectionDifference() > (Math.PI * 0.9) && // On colliding angle?
    this.angleFromFishDirectionToClosestFish() < (Math.PI * 0.2)) { // In colliding sector?
    this.dx += this.following.x * 0.1;
    this.dy += this.following.y * 0.1;
    if (keyDown) affinityLine(this.following, this, "yellow");
   } else if (this.followingDistance > FOLLOW_DISTANCE * 0.3) { // Dont go closer if close
    this.dx += Math.cos(this.angleToClosestFish()) * (0.05 * this.distanceFactor);
    this.dy += Math.sin(this.angleToClosestFish()) * (0.05 * this.distanceFactor);
   }
   if (keyDown) affinityLine(this.following, this, "red");
  }
  // Go closer to center, crashing into the canvas walls is just silly!
  if (this.x < canvas.width * .1 || this.x > canvas.width * .9 || this.y < canvas.height * .2 || this.y > canvas.height * .8) {
   this.dx += (canvas.width / 2 - this.x) / 5000;
   this.dy += (canvas.height / 2 - this.y) / 5000;
  }
  // Poor little fishies are scared of your cursor
  if (py(this.x - cursor.x, this.y - cursor.y) < FOLLOW_DISTANCE * 0.75) {
   this.dx -= (cursor.x - this.x) / 500;
   this.dy -= (cursor.y - this.y) / 500;
   maxSpeed = 4;
   if (keyDown) affinityLine(cursor, this, "green");
  }
  // If following fish, try avoid going close to your siblings
  if (this.following != null) {
   for (var i = 0; i < this.following.entourage.length; i++) {
    var siblingFish = this.following.entourage[i];
    if (siblingFish !== this) {
     if (py(this.x - siblingFish.x, this.y - siblingFish.y) < FOLLOW_DISTANCE * 0.2) {
      if (keyDown) affinityLine(siblingFish, this, "yellow");
      this.dx -= (siblingFish.x - this.x) / 1000;
      this.dy -= (siblingFish.y - this.y) / 1000;
     }
    }
   }
  }
  // Calculate heading from new speed
  this.angle = Math.atan2(this.dy, this.dx);

  // Grab the speed from the vectors, and normalize it
  var speed = Math.max(0.1, Math.min(maxSpeed, py(this.dx, this.dy)));
  // Recreate speed vector from recombining angle of direction with normalized speed
  this.dx = Math.cos(this.angle) * (speed + speedBoost);
  this.dy = Math.sin(this.angle) * (speed + speedBoost);
  // Fish like to move it, move it!
  this.x += this.dx;
  this.y += this.dy;
 }
}
/* ---------------------- FISH "CLASS" END -------------- */

/* ---------------------- MAIN START -------------------- */
var canvas = document.getElementById('fishtank');
var context = canvas.getContext('2d');
var fishes = [];
var speedBoostCountdown = 200,
 speedBoost = 0,
 SPEED_BOOST = 2;
var fishBitmap = new Image()
fishBitmap.onload = function() {
 update();
};
fishBitmap.src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGz5auUkk_i4xq4_n8QqYIdYM7NTpZZCSSfwl3noWcTyhxjX_0ymQxNqQfdqFjawRIt7DuQvuxTNE3RrLOtQLv2nAcIfMIQ-G1ufZAIpUXeLrPTKpobMHbB1jBzFi6HlCGkP_GCW5UDkA/s1600-r/fish-mys2010.png";
//Draw Circle
function draw(f) {
 var r = f.angle + Math.PI;
 context.translate(f.x, f.y);
 context.rotate(r);
 var w = 20;
 var acc = py(f.dx - f.ox, f.dy - f.oy) / 0.05;
 // If a fish does a "flip", make it less wide
 if (acc > 1) {
  w = 10 + 10 / acc;
 }
 context.drawImage(fishBitmap, 0, 0, w, 6);
 context.rotate(-r);
 context.translate(-f.x, -f.y);
}
// Pythagoras shortcut
function py(a, b) {
 return Math.sqrt(a * a + b * b);
}
//------------ USER INPUT START -------------
var cursor = {
 x: 0,
 y: 0
};
var cursorDown = false,
 keyDown = false;
document.onmousemove = function(e) {
 cursor.x = e.pageX - (window.innerWidth / 2 - canvas.width / 2);
 cursor.y = e.pageY - (window.innerHeight / 2 - canvas.height / 2);
}
document.onmouseout = function(e) { //Out of screen is not a valid pos
 cursor.y = cursor.x = Number.MAX_VALUE;
}
document.onmousedown = function() {
 activateSpeedBoost();
 cursorDown = true;
}
document.onmouseup = function() {
 cursorDown = false;
}
document.onkeydown = function() {
 keyDown = true;
}
document.onkeyup = function() {
  keyDown = false;
 }

 //------------ USER INPUT STOP -------------
function deltaAngle(f, o) { //Find the shortest angle between two
 var r = f - o;
 return Math.atan2(Math.sin(r), Math.cos(r));
}
function affinityLine(f, o, c) { //Draw a line with pretty gradient
 var grad = context.createLinearGradient(f.x, f.y, o.x, o.y);
 grad.addColorStop(0, c);
 grad.addColorStop(1, "black");
 context.strokeStyle = grad;
 context.beginPath();
 context.moveTo(f.x, f.y);
 context.lineTo(o.x, o.y);
 context.stroke();
}
function activateSpeedBoost() {
 speedBoostCountdown = 400 + Math.round(400 * Math.random());
 speedBoost = SPEED_BOOST;
}
//Update and draw all of them
function update() {
  if (fishes.length < 500) {
   fishes.push(new Fish(fishes.length));
  }
  if (!cursorDown) {
   //clear the canvas
   canvas.width = canvas.width; //Try commenting this line :-)
   //Update and draw fish
   for (var i = 0; i < fishes.length; i++) {
    var fish = fishes[i];
    fish.calc();
    draw(fish);
   }
  }
  speedBoostCountdown--;
  if (speedBoostCountdown < 0) {
   activateSpeedBoost();
  }
  if (speedBoost > 0) {
   speedBoost -= SPEED_BOOST / 80; //Reduce speed bost fast!
  } else {
   speedBoost = 0;
  }
  requestAnimationFrame(update);
 }

 /* ---------------------- MAIN END ----------------------- */
      //@ sourceURL=pen.js
    </script>

<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>
Edited by. Myscript2010
Sources by. P.S Amundsen

Memasang kode Animated Cube Slider
Kode ini menampilkan gambar auto slide. Untuk menerapkan kode tersebut
Langkah awal Login ke akun blog klik tombol blog baru buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai
Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<style class="cp-pen-styles">
html, body {
    width: 100%;
    height: 100%;
    background: #FF0074;
    color: #fff;
    font-family: "Open Sans", sans-serif;
    font-size: 11px;
    }
.title {
  text-align: center;
  margin: 40px;
}
    .title h1, .title p {
      margin: 0;
    }
.slider {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 200px;
    height: 200px;
     margin: auto;
    -webkit-perspective: 600px;
            perspective: 600px;
}
    .slider * {
        -webkit-transition: all 1s cubic-bezier(0.5, -0.75, 0.2, 1.5);
                transition: all 1s cubic-bezier(0.5, -0.75, 0.2, 1.5);
    }
    .container {
        width: inherit;
        height: inherit;
        -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
        -webkit-transform: rotateY(0deg) rotateX(0deg);
                transform: rotateY(0deg) rotateX(0deg);
    }
        .slide, .slide:after, .slide:before {
            display: block;
            width: inherit;
            height: inherit;
            background: url('http://Link Gambar.png');
            position: absolute;
            -webkit-transform-style: preserve-3d;
                    transform-style: preserve-3d;
            background-size: cover;
            background-position: center;
        }
        .slide.x {
          -webkit-transform: rotateY(90deg);
                  transform: rotateY(90deg);
        }

            .slide.x:after {
                content: '';
                background-image: url('http://Link Gambar.png');
                -webkit-transform: translateZ(100px) rotateZ(-90deg);
                        transform: translateZ(100px) rotateZ(-90deg);
        }

            .slide.x:before {
                content: '';
                background-image: url('http://Link Gambar.png');
                -webkit-transform: translateZ(-100px) rotateZ(-90deg);
                        transform: translateZ(-100px) rotateZ(-90deg);
            }

        .slide.y {
          -webkit-transform: rotateX(90deg);
                  transform: rotateX(90deg);
        }

            .slide.y:after {
                content: '';
                background-image: url('http://Link Gambar.png');
                -webkit-transform: translateZ(100px) scale(-1);
                        transform: translateZ(100px) scale(-1);
            }
            .slide.y:before {
                content: '';
                background-image: url('http://Link Gambar.png');
                -webkit-transform: translateZ(-100px);
                        transform: translateZ(-100px);
            }

        .slide.z {
          -webkit-transform: rotateX(0);
                  transform: rotateX(0);
        }

            .slide.z:after {
                content: '';
                background-image: url('http://Link Gambar.png');
                -webkit-transform: translateZ(100px);
                        transform: translateZ(100px);
            }
            .slide.z:before {
                content: '';
                background-image: url('http://Link Gambar.png');
                -webkit-transform: translateZ(-100px);
                        transform: translateZ(-100px);
            }
        .container {
            -webkit-animation: rotate 15s infinite cubic-bezier(1, -0.75, 0.5, 1.2);
            animation: rotate 15s infinite cubic-bezier(1, -0.75, 0.5, 1.2);
        }
        @-webkit-keyframes rotate {
            0%, 10% {-webkit-transform: rotateY(0deg) rotateX(0deg);transform: rotateY(0deg) rotateX(0deg);}
            15%, 20% {-webkit-transform: rotateY(180deg) rotateX(0deg);transform: rotateY(180deg) rotateX(0deg);}
            25%, 35% {-webkit-transform: rotateY(180deg) rotateX(270deg);transform: rotateY(180deg) rotateX(270deg);}
            40%, 50% {-webkit-transform: rotateY(180deg) rotateX(90deg);transform: rotateY(180deg) rotateX(90deg);}
            55%, 65% {-webkit-transform: rotateY(-90deg) rotateX(90deg);transform: rotateY(-90deg) rotateX(90deg);}
            70%, 80% {-webkit-transform: rotateY(90deg) rotateX(90deg);transform: rotateY(90deg) rotateX(90deg);}
            90%, 95% {-webkit-transform: rotateY(0deg) rotateX(90deg);transform: rotateY(0deg) rotateX(90deg);}
        }
        @keyframes rotate {
            0%, 10% {-webkit-transform: rotateY(0deg) rotateX(0deg);transform: rotateY(0deg) rotateX(0deg);}
            15%, 20% {-webkit-transform: rotateY(180deg) rotateX(0deg);transform: rotateY(180deg) rotateX(0deg);}
            25%, 35% {-webkit-transform: rotateY(180deg) rotateX(270deg);transform: rotateY(180deg) rotateX(270deg);}
            40%, 50% {-webkit-transform: rotateY(180deg) rotateX(90deg);transform: rotateY(180deg) rotateX(90deg);}
            55%, 65% {-webkit-transform: rotateY(-90deg) rotateX(90deg);transform: rotateY(-90deg) rotateX(90deg);}
            70%, 80% {-webkit-transform: rotateY(90deg) rotateX(90deg);transform: rotateY(90deg) rotateX(90deg);}
            90%, 95% {-webkit-transform: rotateY(0deg) rotateX(90deg);transform: rotateY(0deg) rotateX(90deg);}
        }
.shadow {
    display: block;
    width: 200px;
    height: 200px;
    background: rgba(0,0,0,0.75);
    position: absolute;
    top: 60%;
    -webkit-transform: rotateX(90deg);
            transform: rotateX(90deg);
    z-index: -1;
    -webkit-filter: blur(20px);
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><fegaussianblur stdDeviation="20" /></filter></svg>#filter');
    -webkit-filter: blur(20px);
            filter: blur(20px);
    left: 0;
    right: 0;
    margin: auto;
    -webkit-animation: rotateShadow 15s infinite cubic-bezier(1, -0.75, 0.5, 1.2);
    animation: rotateShadow 15s infinite cubic-bezier(1, -0.75, 0.5, 1.2);
}
@-webkit-keyframes rotateShadow {
        0%, 10% {-webkit-transform: rotateY(0deg) rotateX(90deg);}  
        15%, 20% {-webkit-transform: rotateY(180deg) rotateX(90deg);;}
        20.1%, 20.9% {-webkit-transform: rotateY(180deg) rotateX(90deg) translatez(5px);}
        25%, 35% {-webkit-transform: rotateY(180deg) rotateX(90deg);}
        35.1%, 35.9% {-webkit-transform: rotateY(180deg) rotateX(90deg) translatez(-5px);}
        40%, 50% {-webkit-transform: rotateY(180deg) rotateX(90deg);}
        55%, 65% {-webkit-transform: rotateY(0deg) rotateX(90deg);}
        70%, 80% {-webkit-transform: rotateY(180deg) rotateX(90deg);}
        90%, 99% {-webkit-transform: rotateY(90deg) rotateX(90deg);}
        99.1%, 99.9% {-webkit-transform: rotateY(90deg) rotateX(90deg) translatez(-5px);}
    }

    /*@keyframes rotateShadow {
        0%, 10% {transform: rotateY(0deg) rotateX(90deg);}  
        15%, 20% {transform: rotateY(180deg) rotateX(90deg); opacity: 1; filter: alpha(opacity=100);}
        20.1%, 20.9% {transform: rotateY(180deg) rotateX(90deg) translatez(10px); opacity: 0.95; filter: alpha(opacity=95);}
        25%, 35% {transform: rotateY(180deg) rotateX(90deg); opacity: 1; filter: alpha(opacity=100);}
        35.1%, 35.9% {transform: rotateY(180deg) rotateX(90deg) translatez(-10px); opacity: 0.95; filter: alpha(opacity=95);}
        40%, 50% {transform: rotateY(180deg) rotateX(90deg);}
        55%, 65% {transform: rotateY(0deg) rotateX(90deg);}
        70%, 80% {transform: rotateY(180deg) rotateX(90deg);}
        90%, 99% {transform: rotateY(0deg) rotateX(90deg);}
        99.1%, 99.9% {transform: rotateY(180deg) rotateX(90deg) translatez(5px); opacity: 0.95; filter: alpha(opacity=95);}
    }*/

/*
Credit */
.credit {
        position: fixed;
        bottom: 22px;
        left: 0;
        right: 0;
        margin: auto;
        width: 200px;
        text-align: center;
    }
.credit a {
        font-weight: 900;
        color: blue;
        text-decoration: none;
        -webkit-transition: all .15s linear;
                transition: all .15s linear;
        background: url(Link Gambar)no-repeat right;
        background-size: 12px;
        padding-right: 20px !important;
        -filter: invert(1);
        -webkit-filter: invert(1);
        -moz--filter: invert(1);
    -o--filter: invert(1);}
    .credit a:hover {
        color: tomato;}
</style>
<div class="title">
<h1>
Animated Cube Slider</h1>
<p>
CSS Only</p>
</div>
<div class="slider">
<div class="container">
<div class="slide x">
</div>
<div class="slide y">
</div>
<div class="slide z">
</div>
</div>
<div class="shadow">
</div>
</div>
<p class="credit">
by <span><a href="http://Your Link.com" target="_blank">Your Text</a></span></p>
Penjelasan : Edit kode yang diwarnai
Edited by. Myscript2010
Sources by. Alberto Hartzet on Codepen

Memasang kode Deep Sea Creature CSS3
Kode ini menampilkan Gambar animasi. Untuk menerapkan kode tersebut
Langkah awal Login ke akun blog klik tombol blog baru buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai
Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<style class="cp-pen-styles"> 
body {
        background: #000;
        overflow: hidden;
}
canvas {
        background: url(http://media.giphy.com/media/iEygmp20xiQE0/giphy.gif) 0 0 no-repeat;
        background-size: 100% 100%;
}
canvas,
img {
        display: block;
        border: 1px solid black;

}</style>



<center>
<canvas id='c'></canvas>
<img id="img">
Sources by. Codepen
Edited by. Myscript2010
If you want to directly copy  and  paste you can Download  Deep Sea Creature Full 

Memasang kode Lighting CSS3
Kode ini menampilkan Text yang disinari cahaya. Untuk menerapkan kode tersebut
Langkah awal Login ke akun blog klik tombol blog baru buat satubuah link baru kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai
Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<style>
body {
    margin: 0;
    padding: 0;
    background: rgb(0, 0, 0);
    font-family: "Times New Roman", Georgia, Serif;
}
.wrapper {
  position: relative;
  width: 540px;
  margin: 0 auto;
}

p {
  margin: 0;
  padding: 0;
  font-family: ‘Arial Narrow’, sans-serif;
  font-size: 98px;
  letter-spacing: 1px;
}

.text {
    position: absolute;
    top: 40px;
    left: 100px;
    margin: 0;
    padding: 0;
    color: rgb(0, 0, 0);
    background: transparent;
    text-shadow: 0px 10px 10px rgb(0, 0, 0);
    z-index: 1;
    -webkit-animation: shadow 6.0s ease-in-out infinite;
    animation: shadow 6.0s ease-in-out infinite;
}

.light {
    position: absolute;
    top: 30px;
    left: 50px;
    width: 140px;
    height: 140px;
    margin: 0;
    padding: 0;
    opacity: 0.8;
    border-radius: 100px;
    z-index: 0;
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.2) 100%);
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.2) 100%);
     box-shadow: 0px 0px 50px rgba(255, 255, 255, 1);
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-animation: light 6.0s ease-in-out infinite;
    animation: light 6.0s ease-in-out infinite;
}

.light.two {
    z-index: 2;
    opacity: 0.7;
}

@-webkit-keyframes light {
    0% {

        left: 45px;
    }

    50% {
        left: 335px;
    }

    100% {
        left: 45px;
    }
}

@keyframes light {
      0% {
        left: 45px;
    }
    50% {
        left: 335px;
    }
    100% {
        left: 45px;
    }
}

@-webkit-keyframes shadow {
    0% {
        text-shadow: -9px 2px 5px rgb(0, 0, 0);
    }
    50% {
        text-shadow: 9px 2px 5px rgb(0, 0, 0);
    }
    100% {
        text-shadow: -9px 2px 5px rgb(0, 0, 0);
    }
}
@keyframes shadow {
    0% {
        text-shadow: -9px 2px 5px rgb(0, 0, 0);
    }
    50% {
        text-shadow: 9px 2px 5px rgb(0, 0, 0);
    }
    100% {
        text-shadow: -9px 2px 5px rgb(0, 0, 0);
    }
}
</style>
<div class="wrapper">
  <div class="text">
    <p>Your Text</p>
    </div>
     <div class="light"></div>
    <div class="light two"></div></div>
Animated code by. Christofer Vilander
Design code is edited by. Mys2010 In Codepen
If you want to directly copy  and  paste you canDownload Here Animated Preloader