Mys2010 on Codepen

Memasang kode Teks animasi Kode ini menampilkan Teks animasi yang dapat menghiasi blogg. 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

<script src='http://code.jquery.com/jquery-1.10.2.min.js'></script><script src='http://dimajt.github.io/textition/js/textition.js'></script> <script>
var init = function () {
    $('body').css('opacity', 1);
    $('header').textition({
        map: {
            x: 50,
            y: 20,
            z: 500
        },
        speed: 0.8,
        handler: false,
        autoplay: true,
        interval: 3
    });
    $('nav a:eq(0)').textition({
        map: {
            x: 100,
            y: 0,
            z: 0
        },
        speed: 0.5,
        handler: 'mouseenter mouseleave'
    });
    $('nav a:eq(1)').textition({
        map: {
            x: 0,
            y: 0,
            z: 100
        },
        speed: 0.5,
        perspective: 50,
        handler: 'mouseenter mouseleave'
    });
    $('nav a:eq(2)').textition({
        map: {
            x: 0,
            y: 40,
            z: 0
        },
        speed: 0.5,
        animation: 'ease-out',
        handler: 'mouseenter mouseleave'
    });
};
$(document).ready(init);
//# sourceURL=pen.js
</script>

<header>
<h1> Let's Share </h1>
<h2> Through </h2>
<h2> Social Networking </h2>
</header>

Penjelasan : Ganti teks yang berwarna orange, tambahkan kode warna teks 
diatas kode <header> klik publish selesai <font size="3" color="white"face="arial">

Sources by. Codepen
Edited by. Myscript2010

DEMOSHOW

Memasang kode HTML5 Animated 3D Card
Kode ini menampilkan Gambar serta musik Mp3. 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="mys2010-styles">
* { -moz-boz-sizing: border-box; font-family: Avenir, sans-serif; }
body { margin: 0; }
figure#desk {
  transform: rotateX(60deg);
  position: relative;
  width: 200%;
  height: 900px;
  background: url(http://Link Gambar.jpg);
  background-size: cover;
  margin-left: -200px;
  margin-top: -150px;
  transition: 1.2s 2s;
}

div#scatter {
  perspective: 700px;
  width: 100%;
  height: 493px;
  overflow: hidden;
  background: linear-gradient(#000  0%, #fff 100%);
}
figure#desk a  {
  position: absolute;
  top: 150px;
  border: 20px solid #ffe;
  box-shadow: 0px 0px 6px 6px rgba(0,0,0,0.3);
  width: 20%;
  font-size: 0;
  background: #000;
}
figure#desk a video { width: 100%; font-size: 0; transition: .6s; }
figure a#Sule  {
  transform: translateX(200%) rotateZ(60deg);
  transition: 2s;
}
figure:hover a#Sule  { transform: translateX(30%) rotateZ(700deg);
}
figure a#Mys2010 {
  top: 300px;
  transform: translateX(220%) rotateZ(48deg);
  transition: 2s .4s;
}
figure#desk:hover a#Mys2010 {
  transform: translateX(100%) rotateZ(360deg);
}
figure#desk:hover {
  transform: rotateX(10deg);
}
figure#desk a:hover video { opacity: 0.5; }
figure#desk a:before {
  content: "play";
  font-size: 30px;
  position: absolute;
  top: 45%; left: 45%;
  color: #fff;
  opacity: 0;
  transition: .3s;
}

figure#desk a:hover:before { opacity: 1; }
figure#desk a.playing:hover:before {
  content: none;
  opacity: 0;
}
figure#desk a.playing video { opacity: 1; }</style>
</head><body>
<div id="scatter">
<figure id="desk">
<a href="#" id="Sule">
<video poster="http://Link Gambar.jpg">
<source src="https://Link musik.mp3" type="video/mpeg">
<source src="https://Link musik.mp3" type="video/webm">
</video>
</a>
<a href="#" id="Mys2010">
<video poster="http://Link Gambar.jpg">
<source src="https://Link musik.mp3" type="video/mpeg">
<source src="https://Link musik.mp3" type="video/webm">
</video>
</a>
</figure>

<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

<script>
(function () {
    var desk = document.getElementById('desk');
    var links = desk.getElementsByTagName('a');
    for (var i = 0; i < links.length; i++) {
        if (window.CP.shouldStopExecution(1)) {
            break;
        }
        links[i].addEventListener('click', handler, false);
    }
    window.CP.exitedLoop(1);
    ;
    function handler(e) {
        e.preventDefault();
        var x = e.target;
        var video = x.querySelector('video');
        x.play();
        x.parentNode.classList.add('playing');
    }
    ;
}());
//# sourceURL=pen.js
</script>

Penjelsan :
Terapkan Link Musik dan Link Gambar pada kode yang diwarnai

Edited by. Myscript2010
Sources by. Dudley Storey  on Codepen

Memasang kode Canvas & Js Fireworks HTML5
Kode ini menampilkan Fireworks yang mengikuti kursor. 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>     
/* basic styles for black background and crosshair cursor */
body {
    background: #000;
    margin: 0;
}
canvas {
    cursor: crosshair;
    display: block;
}
    </style>
<script>
  window.console = window.console || function(t) {};
</script>
<!-- setup our canvas element -->
<canvas id="canvas">Canvas is not supported in your browser.</canvas>
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js"></script>
<script>
      // when animating on canvas, it is best to use requestAnimationFrame instead of setTimeout or setInterval
// not supported in all browsers though and sometimes needs a prefix, so we need a shim
window.requestAnimFrame = ( function() {
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
                function( callback ) {
                window.setTimeout( callback, 1000 / 60 );
                };
})();
// now we will setup our basic variables for the demo
var canvas = document.getElementById( 'canvas' ),
        ctx = canvas.getContext( '2d' ),
        // full screen dimensions
        cw = window.innerWidth,
        ch = window.innerHeight,
        // firework collection
        fireworks = [],
        // particle collection
        particles = [],
        // starting hue
        hue = 120,
        // when launching fireworks with a click, too many get launched at once without a limiter, one launch per 5 loop ticks
        limiterTotal = 5,
        limiterTick = 0,
        // this will time the auto launches of fireworks, one launch per 80 loop ticks
        timerTotal = 80,
        timerTick = 0,
        mousedown = false,
        // mouse x coordinate,
        mx,
        // mouse y coordinate
        my;      
// set canvas dimensions
canvas.width = cw;
canvas.height = ch;
// now we are going to setup our function placeholders for the entire demo
// get a random number within a range
function random( min, max ) {
    return Math.random() * ( max - min ) + min;
}
// calculate the distance between two points
function calculateDistance( p1x, p1y, p2x, p2y ) {
    var xDistance = p1x - p2x,
            yDistance = p1y - p2y;
    return Math.sqrt( Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 ) );
}
// create firework
function Firework( sx, sy, tx, ty ) {
    // actual coordinates
    this.x = sx;
    this.y = sy;
    // starting coordinates
    this.sx = sx;
    this.sy = sy;
    // target coordinates
    this.tx = tx;
    this.ty = ty;
    // distance from starting point to target
    this.distanceToTarget = calculateDistance( sx, sy, tx, ty );
    this.distanceTraveled = 0;
    // track the past coordinates of each firework to create a trail effect, increase the coordinate count to create more prominent trails
    this.coordinates = [];
    this.coordinateCount = 3;
    // populate initial coordinate collection with the current coordinates
    while( this.coordinateCount-- ) {
        this.coordinates.push( [ this.x, this.y ] );
    }
    this.angle = Math.atan2( ty - sy, tx - sx );
    this.speed = 2;
    this.acceleration = 1.05;
    this.brightness = random( 50, 70 );
    // circle target indicator radius
    this.targetRadius = 1;
}
// update firework
Firework.prototype.update = function( index ) {
    // remove last item in coordinates array
    this.coordinates.pop();
    // add current coordinates to the start of the array
    this.coordinates.unshift( [ this.x, this.y ] );  
    // cycle the circle target indicator radius
    if( this.targetRadius < 8 ) {
        this.targetRadius += 0.3;
    } else {
        this.targetRadius = 1;
    }  
    // speed up the firework
    this.speed *= this.acceleration;  
    // get the current velocities based on angle and speed
    var vx = Math.cos( this.angle ) * this.speed,
            vy = Math.sin( this.angle ) * this.speed;
    // how far will the firework have traveled with velocities applied?
    this.distanceTraveled = calculateDistance( this.sx, this.sy, this.x + vx, this.y + vy );  
    // if the distance traveled, including velocities, is greater than the initial distance to the target, then the target has been reached
    if( this.distanceTraveled >= this.distanceToTarget ) {
        createParticles( this.tx, this.ty );
        // remove the firework, use the index passed into the update function to determine which to remove
        fireworks.splice( index, 1 );
    } else {
        // target not reached, keep traveling
        this.x += vx;
        this.y += vy;
    }
}
// draw firework
Firework.prototype.draw = function() {
    ctx.beginPath();
    // move to the last tracked coordinate in the set, then draw a line to the current x and y
    ctx.moveTo( this.coordinates[ this.coordinates.length - 1][ 0 ], this.coordinates[ this.coordinates.length - 1][ 1 ] );
    ctx.lineTo( this.x, this.y );
    ctx.strokeStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';
    ctx.stroke();  
    ctx.beginPath();
    // draw the target for this firework with a pulsing circle
    ctx.arc( this.tx, this.ty, this.targetRadius, 0, Math.PI * 2 );
    ctx.stroke();
}
// create particle
function Particle( x, y ) {
    this.x = x;
    this.y = y;
    // track the past coordinates of each particle to create a trail effect, increase the coordinate count to create more prominent trails
    this.coordinates = [];
    this.coordinateCount = 5;
    while( this.coordinateCount-- ) {
        this.coordinates.push( [ this.x, this.y ] );
    }
    // set a random angle in all possible directions, in radians
    this.angle = random( 0, Math.PI * 2 );
    this.speed = random( 1, 10 );
    // friction will slow the particle down
    this.friction = 0.95;
    // gravity will be applied and pull the particle down
    this.gravity = 1;
    // set the hue to a random number +-50 of the overall hue variable
    this.hue = random( hue - 50, hue + 50 );
    this.brightness = random( 50, 80 );
    this.alpha = 1;
    // set how fast the particle fades out
    this.decay = random( 0.015, 0.03 );
}
// update particle
Particle.prototype.update = function( index ) {
    // remove last item in coordinates array
    this.coordinates.pop();
    // add current coordinates to the start of the array
    this.coordinates.unshift( [ this.x, this.y ] );
    // slow down the particle
    this.speed *= this.friction;
    // apply velocity
    this.x += Math.cos( this.angle ) * this.speed;
    this.y += Math.sin( this.angle ) * this.speed + this.gravity;
    // fade out the particle
    this.alpha -= this.decay;  
    // remove the particle once the alpha is low enough, based on the passed in index
    if( this.alpha <= this.decay ) {
        particles.splice( index, 1 );
    }
}
// draw particle
Particle.prototype.draw = function() {
    ctx. beginPath();
    // move to the last tracked coordinates in the set, then draw a line to the current x and y
    ctx.moveTo( this.coordinates[ this.coordinates.length - 1 ][ 0 ], this.coordinates[ this.coordinates.length - 1 ][ 1 ] );
    ctx.lineTo( this.x, this.y );
    ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')';
    ctx.stroke();
}
// create particle group/explosion
function createParticles( x, y ) {
    // increase the particle count for a bigger explosion, beware of the canvas performance hit with the increased particles though
    var particleCount = 30;
    while( particleCount-- ) {
        particles.push( new Particle( x, y ) );
    }
}
// main demo loop
function loop() {
    // this function will run endlessly with requestAnimationFrame
    requestAnimFrame( loop );  
    // increase the hue to get different colored fireworks over time
    //hue += 0.5;
  // create random color
  hue= random(0, 360 );  
    // normally, clearRect() would be used to clear the canvas
    // we want to create a trailing effect though
    // setting the composite operation to destination-out will allow us to clear the canvas at a specific opacity, rather than wiping it entirely
    ctx.globalCompositeOperation = 'destination-out';
    // decrease the alpha property to create more prominent trails
    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
    ctx.fillRect( 0, 0, cw, ch );
    // change the composite operation back to our main mode
    // lighter creates bright highlight points as the fireworks and particles overlap each other
    ctx.globalCompositeOperation = 'lighter';  
    // loop over each firework, draw it, update it
    var i = fireworks.length;
    while( i-- ) {
        fireworks[ i ].draw();
        fireworks[ i ].update( i );
    }  
    // loop over each particle, draw it, update it
    var i = particles.length;
    while( i-- ) {
        particles[ i ].draw();
        particles[ i ].update( i );
    }  
    // launch fireworks automatically to random coordinates, when the mouse isn't down
    if( timerTick >= timerTotal ) {
        if( !mousedown ) {
            // start the firework at the bottom middle of the screen, then set the random target coordinates, the random y coordinates will be set within the range of the top half of the screen
            fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) );
            timerTick = 0;
        }
    } else {
        timerTick++;
    }  
    // limit the rate at which fireworks get launched when mouse is down
    if( limiterTick >= limiterTotal ) {
        if( mousedown ) {
            // start the firework at the bottom middle of the screen, then set the current mouse coordinates as the target
            fireworks.push( new Firework( cw / 2, ch, mx, my ) );
            limiterTick = 0;
        }
    } else {
        limiterTick++;
    }
}
// mouse event bindings
// update the mouse coordinates on mousemove
canvas.addEventListener( 'mousemove', function( e ) {
    mx = e.pageX - canvas.offsetLeft;
    my = e.pageY - canvas.offsetTop;
});
// toggle mousedown state and prevent canvas from being selected
canvas.addEventListener( 'mousedown', function( e ) {
    e.preventDefault();
    mousedown = true;
});
canvas.addEventListener( 'mouseup', function( e ) {
    e.preventDefault();
    mousedown = false;
});
// once the window loads, we are ready for some fireworks!
window.onload = loop;
      //@ sourceURL=pen.js
    </script>
<script>
  if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
  }
</script>

Penjelsan :
Kode Fireworks dapat memperindah tampilan blogg, Modifikasi sesuai keinginan

Edited by. Myscript2010
Sources by. haiqing wang on Codepen

DEMOSHOW

Memasang kode CSS Button Hover Rotate
Kode ini menampilkan Tombol Sosial Media yang berputar. 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>
      @import url(http://weloveiconfonts.com/api/?family=fontawesome);

[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}
html { overflow:hidden;    }
body { background:#EDEABB; }

.menuitem {
  position:absolute;
  width:60px;
  height:60px;
  border-radius:50%;
  -webkit-transition: -webkit-transform 300ms ease-in-out;
        -moz-transition: -moz-transform 300ms ease-in-out;
                  transition: transform 300ms ease-in-out;
}
.menuitem:nth-of-type(1) {
  z-index:20;
  background:#3b5998;
  box-shadow:0 8px 6px -6px hsla(0,0%,0%,1),inset 0 0 0 1px #d2d2d2,0 0 0 1px #133783;
}
.menuitem:nth-of-type(2) {
  z-index:18;
  background:#00aced;
  box-shadow:0 8px 6px -6px hsla(0,0%,0%,1),inset 0 0 0 1px #fff,0 0 0 1px #00aced;
}
.menuitem:nth-of-type(3) {
  z-index:16;
  background:#cc2226;
  box-shadow:0 8px 6px -6px hsla(0,0%,0%,1),inset 0 0 0 1px #f5f5f5,0 0 0 1px #333;
}
.menuitem:nth-of-type(4) {
  z-index:14;
  background:#201f1f;
  box-shadow:0 8px 6px -6px hsla(0,0%,0%,1),inset 0 0 0 1px #f4cab1,0 0 0 1px #201f1f;
}
.menuitem:nth-of-type(5) {
  z-index:12;
  background:#f4a221;
  box-shadow:0 8px 6px -6px hsla(0,0%,0%,1),inset 0 0 0 1px #fff,0 0 0 1px #e47408;
}

.menuitem a {
  text-decoration:none;
  display:block;
  border-radius:50%;
  height:100%;
  width:100%;
  font-size:1.9em;
  line-height:2;
  text-align:center;
}

.fontawesome-facebook  { color:#fff; }
.fontawesome-twitter   { color:#fff; }
.fontawesome-pinterest { color:#f5f5f5; }
.fontawesome-github    { color:#f9f9f9; }
.fontawesome-rss       { color:#f5f5f5; }

.menuitem:hover {
  z-index:25;
  -webkit-transform:scale(1.3);
     -moz-transform:scale(1.3);
          transform:scale(1.3);
}
    </style>

<div class="menuitem">
<a class="fontawesome-facebook" href="https://Your Link"></a>
</div>

<div class="menuitem">
<a class="fontawesome-twitter" href="https://Your Link"></a>
</div>

<div class="menuitem">
<a class="fontawesome-pinterest" href="https://Your Link"></a>
</div>

<div class="menuitem">
<a class="fontawesome-github" href="https://Your Link"></a>
</div>

<div class="menuitem">
<a class="fontawesome-rss" href="https://Your Link"></a>
</div>

<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>
      var maxspeed = 0.14,
    minspeed = 0.03,
    speed = maxspeed,
    radius = 50,
    count = 0;

function rotate() {
    var x = $(document).width() / 2,
        y = $(document).height() / 2,
        length = $('.menuitem').length;

    $('.menuitem').each(function () {
        var angle = count * (Math.PI / 180),
            newx = x + Math.cos(angle) * radius - $(this).width() / 2,
            newy = y + Math.sin(angle) * radius - $(this).height() / 2;
        $(this).css({
            'left': newx + 'px',
                'top': newy + 'px'
        });
        count += 360 / length + speed;
    });
}

$(function () {
    setInterval(rotate, 3000 / 360);
    $(window).mousemove(function (e) {
        var dw = $(document).width(),
            dh = $(document).height(),
            mh = $('.menuitem').height(),
            mw = $('.menuitem').width();

        if (e.pageX > dw / 2 - radius - mw / 2 && e.pageX < dw / 2 + radius + mw / 2 && e.pageY > dh / 2 - radius - mh / 2 && e.pageY < dh / 2 + radius + mh / 2) {
            speed = minspeed;
        } else {
            speed = maxspeed;
        }
    });
});
      //@ sourceURL=pen.js
    </script>

Penjelasan :
Terapkan Link Title pada code yang berwarna magenta, tambahkan background gambar jika diperlukan,
Copy kode berikut pastekan dibawah kode :  //@ sourceURL=pen.js
                          </script> kemudian klik publish selesai

<style class="background-styles">
*{    margin:0px;
 padding:0px;}
body
{
 background:url(http://Link Gambar.jpg);
 background-size:cover;
 background-repeat:no-repeat;
 font-family: "Open Sans", sans-serif;
 font-size: 11px;
 } 
 </style>

Edited by. Myscript2010
Sources by. John Motyl on Codepen

DEMOSHOW

Memasang kode CSS Responsive Buttons
Kode ini menampilkan Tombol Menu Horizontal. 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="styles">
body{background:;font-family:Arial,Helvetica,sans-serif;color:#666666;height:100%;}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-khtml-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;}
.navigation{padding:20px;background-color:#999999;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#bfbfbf), color-stop(100%, #999999));background-image:-webkit-linear-gradient(top, #bfbfbf 0%, #999999 100%);background-image:-moz-linear-gradient(top, #bfbfbf, #999999 100%);background-image:-o-linear-gradient(top, #bfbfbf, #999999 100%);background-image:-khtml-linear-gradient(top, #bfbfbf, #999999 100%);background-image:-ms-linear-gradient(top, #bfbfbf 0%, #999999 100%);background-image:linear-gradient(top, #bfbfbf, #999999 100%);background-repeat:repeat-x;}.navigation .container{padding:8px;}
.navigation .nav_outer{background-color:#cccccc;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#808080), color-stop(100%, #cccccc));background-image:-webkit-linear-gradient(top, #808080 0%, #cccccc 100%);background-image:-moz-linear-gradient(top, #808080, #cccccc 100%);background-image:-o-linear-gradient(top, #808080, #cccccc 100%);background-image:-khtml-linear-gradient(top, #808080, #cccccc 100%);background-image:-ms-linear-gradient(top, #808080 0%, #cccccc 100%);background-image:linear-gradient(top, #808080, #cccccc 100%);background-repeat:repeat-x;padding:1px;-webkit-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-khtml-border-radius:2px;-ms-border-radius:2px;border-radius:2px;}
.navigation ul{background-color:#a6a6a6;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#999999), color-stop(100%, #a6a6a6));background-image:-webkit-linear-gradient(top, #999999 0%, #a6a6a6 100%);background-image:-moz-linear-gradient(top, #999999, #a6a6a6 100%);background-image:-o-linear-gradient(top, #999999, #a6a6a6 100%);background-image:-khtml-linear-gradient(top, #999999, #a6a6a6 100%);background-image:-ms-linear-gradient(top, #999999 0%, #a6a6a6 100%);background-image:linear-gradient(top, #999999, #a6a6a6 100%);background-repeat:repeat-x;padding:8px 0 8px 8px;-webkit-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-khtml-border-radius:2px;-ms-border-radius:2px;border-radius:2px;overflow:hidden;}
.navigation li{background-color:#fff;font-size:13px;line-height:16px;margin-right:8px;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-khtml-border-radius:3px;-ms-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2);-o-box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2);-khtml-box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2);-ms-box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2);box-shadow:0 2px 3px 0 rgba(0, 0, 0, 0.2);margin-bottom:8px;}
.navigation li:last-child{margin-bottom:0;}
.navigation a{text-decoration:none;display:block;text-align:center;padding:2px;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-khtml-border-radius:3px;-ms-border-radius:3px;border-radius:3px;font-weight:bold;color:#555;text-shadow:1px 1px rgba(255, 255, 255, 0.4),-1px -1px rgba(0, 0, 0, 0.075);}
.navigation li:not(.active){position:relative;top:-2px;-webkit-transition:top 0.1s linear;-moz-transition:top 0.1s linear;-o-transition:top 0.1s linear;-khtml-transition:top 0.1s linear;-ms-transition:top 0.1s linear;transition:top 0.1s linear;}.navigation li:not(.active):hover{top:0;}
.navigation li:not(.active) a{-webkit-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0.2);-o-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0.2);-khtml-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0.2);-ms-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0.2);box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0.2);-webkit-transition:box-shadow 0.1s linear;-moz-transition:box-shadow 0.1s linear;-o-transition:box-shadow 0.1s linear;-khtml-transition:box-shadow 0.1s linear;-ms-transition:box-shadow 0.1s linear;transition:box-shadow 0.1s linear;color:#666666;}.navigation li:not(.active) a:hover{-webkit-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0);-moz-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0);-o-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0);-khtml-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0);-ms-box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0);box-shadow:0 6px 5px 0 rgba(0, 0, 0, 0);color:#555;}
.navigation span{display:block;padding:5px 10px;background-color:#ffffff;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#dddddd), color-stop(100%, #ffffff));background-image:-webkit-linear-gradient(top, #dddddd 0%, #ffffff 100%);background-image:-moz-linear-gradient(top, #dddddd, #ffffff 100%);background-image:-o-linear-gradient(top, #dddddd, #ffffff 100%);background-image:-khtml-linear-gradient(top, #dddddd, #ffffff 100%);background-image:-ms-linear-gradient(top, #dddddd 0%, #ffffff 100%);background-image:linear-gradient(top, #dddddd, #ffffff 100%);background-repeat:repeat-x;-webkit-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;-khtml-border-radius:2px;-ms-border-radius:2px;border-radius:2px;background-color:#fff;}
@media only screen and (min-width:420px){.main{padding-top:48px;} .navigation{position:absolute;top:0;left:0;width:100%;}.navigation li{margin-bottom:0;} .navigation ul{padding-right:8px;} .navigation li{display:inline-block;vertical-align:top;width:18%;margin-right:1.25%;} .navigation li:last-child{margin-right:0;}}</style>

<div class="navigation">
<div class="nav_outer">
<ul>
<li class="active">
<h2>
<a href="http://Your Link"><span>Page</span></a></h2>
</li>
<li>
<h2>
<a href="http://Your Link"><span>Page</span></a></h2>
</li>
<li>
<h2>
<a href="http://Your Link"><span>Page</span></a></h2>
</li>
<li>
<h2>
<a href="http://Your Link"><span>Page</span></a></h2>
</li>
<li>
<h2>
<a href="http://Your Link"><span>Page</span></a></h2>
</li>
</ul>
</div>
</div>

Penjelasan :
Terapkan Link title yang diwarnai, tambahkan teks animasi jika diperlukan. Copy code berikut pastekan dibawah code :  .navigation li:last-child{margin-right:0;}}</style>

<style class="Text Animasi-styles">
*{    margin:0px;
 padding:0px;}
body
{
 background:url(http://Link Gambar.jpg);
 background-size:cover;
 background-repeat:no-repeat;
 font-family: "Open Sans", sans-serif;
 font-size: 11px;
 } 
 </style>

<style class="text-animated-styles">
.intro-text h2 {
    font-size: 70px;
    font-weight: 200;
    width: 100%;
    overflow: hidden;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    letter-spacing: 14px;
    text-align: center;
    opacity: 0;
}

.intro-text h2,
.intro-text h2 > span {
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.intro-text h2 > span {
    margin: 0 15px;
}

.intro-text h2 > span > span {
    display: inline-block;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.intro-text h2 > span > span > span {
    display: inline-block;
    color: hsla(0,0%,0%,0);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-animation: TextSequence 5.2s linear forwards;
    -moz-animation: TextSequence 5.2s linear forwards;
    animation: TextSequence 5.2s linear forwards;
}

.intro-text h2:nth-child(2) > span > span > span {
    -webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
    animation-delay: 5s;
}

.intro-text h2:nth-child(3) > span > span > span {
    -webkit-animation-delay: 10s;
    -moz-animation-delay: 10s;
    animation-delay: 10s;
}

.intro-text h2:nth-child(4) > span > span > span {
    -webkit-animation-delay: 15s;
    -moz-animation-delay: 15s;
    animation-delay: 15s;
}

.intro-text h2:nth-child(5) > span > span > span {
    font-size: 150px;
    -webkit-animation-delay: 21s;
    -moz-animation-delay: 21s;
    animation-delay: 21s;
    -webkit-animation-duration: 8s;
    -moz-animation-duration: 8s;
    animation-duration: 8s;
}

.intro-text h2:nth-child(6) > span > span > span {
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    animation-delay: 30s;
}

.intro-text h2:nth-child(7) > span > span > span {
    -webkit-animation-delay: 34s;
    -moz-animation-delay: 34s;
    animation-delay: 34s;
}

@-webkit-keyframes TextSequence {
    0% {
        text-shadow: 0 0 50px #fff;
        letter-spacing: 80px;
        opacity: 0;
        -webkit-transform: rotateY(-90deg);
    }
    50% {
        text-shadow: 0 0 1px #fff;
        letter-spacing: 14px;
        opacity: 0.8;
        -webkit-transform: rotateY(0deg);
    }
    85% {
        text-shadow: 0 0 1px #fff;
        opacity: 0.8;
        -webkit-transform: rotateY(0deg) translateZ(100px);
    }
    100% {
        text-shadow: 0 0 10px #fff;
        opacity: 0;
        -webkit-transform: translateZ(130px);
        pointer-events: none;
    }
}

@-moz-keyframes TextSequence {
    0% {
        text-shadow: 0 0 50px #fff;
        letter-spacing: 80px;
        opacity: 0.2;
        -moz-transform: rotateY(-90deg);
    }
    50% {
        text-shadow: 0 0 1px #fff;
        letter-spacing: 14px;
        opacity: 0.8;
        -moz-transform: rotateY(0deg);
    }
    85% {
        text-shadow: 0 0 1px #fff;
        opacity: 0.8;
        -moz-transform: rotateY(0deg) translateZ(100px);
    }
    100% {
        text-shadow: 0 0 10px #fff;
        opacity: 0;
        -moz-transform: translateZ(130px);
        pointer-events: none;
    }
}

@keyframes TextSequence {
    0% {
        text-shadow: 0 0 50px #fff;
        letter-spacing: 80px;
        opacity: 0.2;
        transform: rotateY(-90deg);
    }
    50% {
        text-shadow: 0 0 1px #fff;
        letter-spacing: 14px;
        opacity: 0.8;
        transform: rotateY(0deg);
    }
    85% {
        text-shadow: 0 0 1px #fff;
        opacity: 0.8;
        transform: rotateY(0deg) translateZ(100px);
    }
    100% {
        text-shadow: 0 0 10px #fff;
        opacity: 0;
        transform: translateZ(130px);
        pointer-events: none;
    }
}

.intro-text h2:nth-child(8) > span > span > span {
    font-size: 30px;
    -webkit-animation: FadeIn 4s linear 40s forwards;
    -moz-animation: FadeIn 4s linear 40s forwards;
    animation: FadeIn 4s linear 40s forwards;
}

@-webkit-keyframes FadeIn {
    0% {
        opacity: 0;
        text-shadow: 0 0 50px #fff;
    }
    100% {
        opacity: 0.8;
        text-shadow: 0 0 1px #fff;
    }
}

@-moz-keyframes FadeIn {
    0% {
        opacity: 0;
        text-shadow: 0 0 50px #fff;
    }
    100% {
        opacity: 0.8;
        text-shadow: 0 0 1px #fff;
    }
}

@keyframes FadeIn {
    0% {
        opacity: 0;


        text-shadow: 0 0 50px #fff;
    }
    100% {
        opacity: 0.8;
        text-shadow: 0 0 1px #fff;
    }
}

/* Bold Text */
.intro-text h2:first-child .word3,
.intro-text h2:nth-child(2) .word2,
.intro-text h2:nth-child(4) .word2 {
    font-weight: 600;
}</style>
<div class="intro-text" id="intro-text">
                <h2>
WELCOME</h2>
<h2>
MYSCRIPT2010</h2>
<h2>
LEARN EDITING </h2>
<h2>
SCRIPT CSS HTML </h2>
<h2>
CODEPEN</h2>
<h2>
EDITED BY.</h2>
<h2>
MYSCRIPT2010</h2>
<h2>
COPYRIGHT2015 CIBEBER CIMAHI</h2>
</div>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='http://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js'></script>
<script>
$(document).ready(function () {
    $('#intro-text > h2').css('opacity', 1).lettering('words').children('span').lettering().children('span').lettering();
});
//# sourceURL=pen.js
</script>

Edited by. Myscript2010
Sources by. Kevadamson On Codepen

DEMOSHOW

Memasang kode Button Share CSS3
Kode ini menampilkan Tombol Link Hover. 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>
* {
  font-smoothing: antialiased;
}
body {
  background: #faa;
}
.wrapper {
  max-width: 960px;
  margin: 65px auto 0;
  background-color: #000;
}
.listc {
  position: relative;
  width: 570px;
  margin: auto;
}
ul {
  list-style: none;
  float: left;
}
ul li {
  position: relative;
  width: 100px; height: 100px;
  float: left;
  background: #474644;
  border-radius: 15px;
  border-bottom: 5px solid #33322f;
  border-left: 3px solid #000000;
  box-shadow: -3px 5px 10px 3px rgba(51, 50, 47, 0.5), 5px -5px 20px 10px rgba(51, 50, 47, 0.5) inset, 0px 2px 1px rgba(0, 0, 0, .7);
  -webkit-transition: -webkit-box-shadow .15s ease-in-out;  
}
ul li a {
  position: absolute;
  width: 50px; height: 50px;
  display: block;
  color: #fff;
  text-align: center;
  line-height: 50px;
  text-decoration: none;
  top: 31%;
  left: 25%;
}
ul li i{
  text-shadow:
    0px 0px #504F4E,
    0px 1px #424241,
    -1px 2px #353534,
    -2px 3px #282827,
    0px 6px 5px rgba(51, 50, 47, 0.8);
  color: #858482;
}


/* Colors */
.facebook:hover i{
  text-shadow:
    0px 0px #394C89, 0px 1px #32447A, -1px 2px #2C3B6A, -2px 3px #26335B, 0px 6px 5px rgba(51, 50, 47, 0.8),
    0 0 1em #3f5598;
  color: #3f5598;
}
.twitter:hover i{
  text-shadow:
    0px 0px #34AEDF, 0px 1px #2E9AC6, -1px 2px #2987AE, -2px 3px #237495, 0px 6px 5px rgba(51, 50, 47, 0.8),
    0 0 1em #3ac1f8;
  color: #3ac1f8;
}
.youtube:hover i{
  text-shadow:
    0px 0px #C42829, 0px 1px #AE2425, -1px 2px #991F20, -2px 3px #831B1C, 0px 6px 5px rgba(51, 50, 47, 0.8),
    0 0 1em #da2d2e;
  color: #da2d2e;
}
.instagram:hover i{
  text-shadow:
    0px 0px #5C228E, 0px 1px #521E7E, -1px 2px #471B6F, -2px 3px #3D175F, 0px 6px 5px rgba(51, 50, 47, 0.8),
    0 0 1em #66269e;
  color: #66269e;
}
.linkedin:hover i{
  text-shadow:
    0px 0px #195CAF, 0px 1px #16529B, -1px 2px #144788, -2px 3px #113D74, 0px 6px 5px rgba(51, 50, 47, 0.8),
    0 0 1em #1c66c2;
  color: #1c66c2;
}
ul li:hover i{
  -webkit-transition: all 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: all 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
ul li:active{
  border-bottom: 1px solid #33322f;
  top: 5px;
  border-left: 1px solid #000000;
  margin-right: 2px;
  box-shadow: -2px 4px 7px 1px rgba(51, 50, 47, 0.7), 5px -5px 20px 10px rgba(51, 50, 47, 0.5) inset, -1px 2px 1px rgba(0, 0, 0, .7);
  z-index: -1; }
</style>

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<div class="wrapper">
  <div class="listc">
    <ul>
      <li class="facebook"><a href="http://#"><i class="fa fa-facebook fa-2x"></i></a></li>
      <li class="twitter"><a href="http://#"><i class="fa fa-twitter fa-2x"></i></a></li>
      <li class="youtube"><a href="http://#"><i class="fa fa-youtube fa-2x"></i></a></li>
      <li class="pinterest">  <a href="http://#"><i class="fa fa-pinterest fa-2x"></i></a></li>
      <li class="google-plus"><a href="http://#"><i class="fa fa-google-plus fa-2x"></i></a></i>
    </ul>
  </div>
</div>

Penjelasan :
Jika ingin menambahkan code teks animasi, copy code berikut :

<style class="cp-pen-styles">html {
 width:100%;
 height:100%;
 min-width:440px;
}
body {
 margin:0;
 opacity:0;
 color:#3584B2;
 text-align:center;
 text-shadow:0 1px 1px #FFF;
 font-family:Palatino Linotype, Book Antiqua, Palatino, serif;
 background-image:-webkit-radial-gradient(50% 10%, cover, #dad, #eee);
 background-image:-moz-radial-gradient(50% 10%, cover, #eee, #dad);
 background-image:-ms-radial-gradient(50% 10%, cover, #dad, #eee);
 background-image:-o-radial-gradient(50% 10%, cover, #eee, #dad);
 background-image:radial-gradient(50% 10%, cover, #eee, #dad);
 -webkit-transition:opacity 0.3s ease;
    -moz-transition:opacity 0.3s ease;
     -ms-transition:opacity 0.3s ease;
      -o-transition:opacity 0.3s ease;
         transition:opacity 0.3s ease;
}
header {
 height:80px;
}
h1 {
 font-size:46px;
 margin:10px 0 0 0;
 font-weight:normal;
}
h2 {
 font-size:24px;
 margin:28px 0 0 0;
 font-weight:normal;
}
p {
 width:320px;
 margin:0 auto;
 font-size:13px;
}
i {
 display:block;
 margin:0 0 20px 0;
}
nav a {
 color:#FFF;
 width:120px;
 font-size:14px;
 cursor:pointer;
 overflow:hidden;
 border-radius:3px;
 position:relative;
 background:#40A1DD;
 display:inline-block;
 padding:10px 0 10px 0;
 margin:10px 10px 30px 10px;
 border:1px solid rgba(255,255,255,.30);
 text-shadow:1px 1px 2px rgba(0,0,0,.50);
 font-family:Verdana, Geneva, sans-serif;
 box-shadow:0 0 0 1px #008ADB, 0 2px 0 1px #008ADB, 0 3px 6px #000;
}
nav a:active {
 top:3px;
 box-shadow:0 0 0 1px #008ADB, 0 0 0 1px #008ADB, 0 0 4px #000;
}
nav a span {
 display:block;
}</style></head><body>
<header>
<h1>
Let's Share</h1>
<h2>
Through</h2>
<h2>
Social Networking</h2>
</header>

Pastekan dibawah code : z-index: -1; }  Lalu copy code berikut :

<script src='http://code.jquery.com/jquery-1.10.2.min.js'></script><script src='http://dimajt.github.io/textition/js/textition.js'></script> <script>
var init = function () {
    $('body').css('opacity', 1);
    $('header').textition({
        map: {
            x: 50,
            y: 20,
            z: 500
        },
        speed: 0.8,
        handler: false,
        autoplay: true,
        interval: 3
    });
    $('nav a:eq(0)').textition({
        map: {
            x: 100,
            y: 0,
            z: 0
        },
        speed: 0.5,
        handler: 'mouseenter mouseleave'
    });
    $('nav a:eq(1)').textition({
        map: {
            x: 0,
            y: 0,
            z: 100
        },
        speed: 0.5,
        perspective: 50,
        handler: 'mouseenter mouseleave'
    });
    $('nav a:eq(2)').textition({
        map: {
            x: 0,
            y: 40,
            z: 0
        },
        speed: 0.5,
        animation: 'ease-out',
        handler: 'mouseenter mouseleave'
    });
};
$(document).ready(init);
//# sourceURL=pen.js
</script>

Pastekan dibawah code  :  <i class="fa fa-google-plus fa-2x"></i></a></i>
    </ul>
  </div>
</div>

Kemudian klik pratinjau untuk melihat hasil dan klik publish selesai

Edited by. Myscript2010
Sources by. Michelle Ortner on Codepen

DEMOSHOW

Memasang kode Pure CSS Dancing Tree
Kode ini menampilkan Gambar animasi Pohon. 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, html {
  padding: 0;
  margin: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;
  background-color: #000;
}
body {
  -webkit-perspective: 100px;
          perspective: 100px;
}
.info {
  margin: 20px;
  padding: 0px 20px;
  background-color: #ccc;
  display: inline-block;
}
.trunk, .trunk div {
  background: #136086;
  /*border-radius:$w;*/
  width: 100px;
  height: 10px;
  position: absolute;
  margin-left: -10px;
  -webkit-animation-name: rot;
          animation-name: rot;
  -webkit-animation-duration: 2.02s;
          animation-duration: 2.02s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
  -webkit-transform-origin: 5px 5px;
          transform-origin: 5px 5px;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  /* &:before{
     content:'';
       display:block;
       width :$w/2;
       height:$w/2;
       background:black;
       overflow:hidden;
       position:absolute;
       top:$w/4;
       border-radius:$w;
       left:$w/4;
     }*/
}
.trunk.trunk, .trunk div.trunk {
  bottom: 0;
  left: 50%;
  -webkit-animation-name: rot-root;
          animation-name: rot-root;
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
}
.trunk > div, .trunk div > div {
  /*opacity:0.9;*/
  top: 0;
  left: 100px;
  -webkit-animation-duration: calc(inherit / 2);
          animation-duration: calc(inherit / 2);
  /* don't works :( */
}
.trunk > div:nth-child(2), .trunk div > div:nth-child(2) {
  /*animation-duration:15s;*/
  -webkit-animation-name: rot-inv;
          animation-name: rot-inv;
  -webkit-animation-duration: 1.7s;
          animation-duration: 1.7s;
}
@-webkit-keyframes rot {
  from {
    -webkit-transform: rotate(15deg) scale(0.72);
            transform: rotate(15deg) scale(0.72);
  }
  to {
    -webkit-transform: rotate(45deg) scale(0.72);
            transform: rotate(45deg) scale(0.72);
  }
}

@keyframes rot {
  from {
    -webkit-transform: rotate(15deg) scale(0.72);
            transform: rotate(15deg) scale(0.72);
  }
  to {
    -webkit-transform: rotate(45deg) scale(0.72);
            transform: rotate(45deg) scale(0.72);
  }
}
@-webkit-keyframes rot-inv {
  from {
    -webkit-transform: rotate(-45deg) scale(0.72);
            transform: rotate(-45deg) scale(0.72);
  }
  to {
    -webkit-transform: rotate(-15deg) scale(0.72);
            transform: rotate(-15deg) scale(0.72);
  }
}
@keyframes rot-inv {
  from {
    -webkit-transform: rotate(-45deg) scale(0.72);
            transform: rotate(-45deg) scale(0.72);
  }
  to {
    -webkit-transform: rotate(-15deg) scale(0.72);
            transform: rotate(-15deg) scale(0.72);
  }
}
@-webkit-keyframes rot-root {
  from {
    -webkit-transform: rotate(-95deg);
            transform: rotate(-95deg);
  }
  to {
    -webkit-transform: rotate(-85deg);
            transform: rotate(-85deg);
  }
}
@keyframes rot-root {
  from {
    -webkit-transform: rotate(-95deg);
            transform: rotate(-95deg);
  }
  to {
    -webkit-transform: rotate(-85deg);
            transform: rotate(-85deg);
  }
}
 </style>

<div class="trunk">
<div><div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div></div><div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div></div></div><div><div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div></div><div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div>/div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div>div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div></div></div></div>

Sources by. Codepen
Edited by. Myscript2010

DEMOSHOW