CSS Hiệu Ứng Thầy Trò Tây Du Ký Thỉnh Kinh

Demo

Chèn CSS dưới vào:

* {
  padding: 0;
  margin: 0;
  list-style: none;
 }
 html,body {
  height: 100%;
 }
 .main {
  height: 100%;
  width: 100%;
  -webkit-background-size: cover;
  background-size: cover;
  overflow: hidden;
  position: relative;
 }
 .main ul {
  height: 100%;
  width: 3920px;
  position: absolute;
  top: 0;
  left: 0;
  animation: dong 50s linear infinite;
 }
 @keyframes dong {
  0% {
   left: 0;
  }
  100% {
   left: 1920px;
  }
 }
 .main ul li {
  height: 100%;
  width: 100%;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9Lp819LVj4KoefzyDFKuznV2pzlrSvz2-Gzr6lXxrdatguTBpxKsZmiQ0kOiOaG61qcdG4QJh0p1XT9z7Y3V2HAoDcTb6bF653wStrLOhK3oT9faSdAmby2RWWwkqifz2HuoOvqc0o2c/s1600/2.jpg);
  float: left;
  margin-left: -2000px;
 }
 .wk {
  z-index: 999;
  width: 200px;
  height: 180px;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF8MKCt-G-4UqPFCeh9d941xzUfVp5wLW0q9lGSrLSHmzW-pQiswV8AGJ8LicfYzpfwB2iBjTPPynBmFCcvtR2XthWnlu9mbxE5PbADvWRpeDKB7PmV08e6WTD3Rf2PYNvGOvne0H4HTQ/s1600/west_01_3ca39fe.png) 0 0 no-repeat;
  /*margin: 400px auto;*/
  position: absolute;
  top: 55%;
  left: 20%;
  animation: wkzou 1s steps(8) infinite;
 }
 @keyframes wkzou {
  to {
   background-position: -1600px 0;
  }
 }
 .bj {
  z-index: 999;
  width: 200px;
  height: 180px;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlcvabzLh1cMKK5lxM6p1W0JkMquopy9nnOuVIGlFZhwjeydp1vFhzfADFdYM-eIzfMA3Uhh3EEUPh7NRh4_06x5Zv0hZ8UN4-QjFjysDHwB8mC9zFp8YTQtK64Dy5KACl15QpLAMjq0A/s1600/west_02_47bad19.png) 0 0 no-repeat;
  /*margin: 400px auto;*/
  position: absolute;
  top: 55%;
  left: 35%;
  animation: bjzou 1s steps(8) infinite;
 }
 @keyframes bjzou {
  to {
   background-position: -1600px 0;
  }
 }
 .ts {
  z-index: 999;
  width: 170px;
  height: 240px;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCpZ3g-Rx5H6u_9az1uFDJ4giK5NM34LHmabM5LKCEhwAi09bo5BChgSa7W6LPAsHx65dHJBS39xYRABfrEil9YSp0MZDYIdeZI3f9gR2TxCPtM83OLPHgDM_2eH64mItCssE2pjSua7Q/s1600/west_03_f962447.png) 0 0 no-repeat;
  /*margin: 400px auto;*/
  position: absolute;
  top: 50%;
  left: 50%;
  animation: tszou 1s steps(8) infinite;
 }
 @keyframes tszou {
  to {
   background-position: -1360px 0;
  }
 }
 .ss {
  z-index: 999;
  width: 210px;
  height: 200px;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_BLzGfVIIRBfBs8BG6Y4ANPN7XK5xJyMtlVMYU4AGZSpZM_iVAlOR57ACkt29A1uKWvCMnK72umKwth7f2hgGR5tAvP3kDFoatX7lM7kTGGKCiN3ipdmtqVcvyL42PSeRwcTtWThcOPo/s3200/west_04_6516d80.png) 0 0 no-repeat;
  /*margin: 400px auto;*/
  position: absolute;
  top: 57%;
  left: 62%;
  animation: sszou 1s steps(8) infinite;
 }
 @keyframes sszou {
  to {
   background-position: -1680px 0;
  }
 }

Tiếp đó là đoạn code hiển thị:

<div class="wk"></div>
<div class="bj"></div>
<div class="ts"></div>
<div class="ss"></div>
<div class="main">
    <ul>
        <li></li>
        <li></li>
    </ul>
</div>

Tổng hợp 8 CSS Hiệu ứng Loading

Demo


Đầu tiên chèn đoạn mã dưới vào nơi hiển thị hiệu ứng loading:

<div class="cell">
  <div class="wrapper">
    <div class="spinner spinner1"></div>
  </div>
</div>
<div class="cell">
  <div class="wrapper">
    <div class="spinner spinner2"></div>
  </div>
</div>
<div class="cell">
  <div class="wrapper">
    <div class="spinner spinner3"></div>
  </div>
</div>
<div class="cell">
  <div class="wrapper">
    <div class="spinner spinner4"></div>
  </div>
</div>
<div class="cell">
  <div class="wrapper">
    <div class="spinner spinner5"></div>
  </div>
</div>
<div class="cell">
  <div class="wrapper">
    <div class="spinner spinner6"></div>
  </div>
</div>
<div class="cell">
  <div class="wrapper">
    <div class="spinner spinner7"></div>
  </div>
</div>
<div class="cell">
  <div class="wrapper">
    <div class="spinner spinner8"></div>
  </div>
</div>

Cuối cùng là chèn đoạn css bên dưới vào là hoàn tất:

@import url("https://fonts.googleapis.com/css?family=Source+Serif+Pro");
*, *::before, *::after {
  box-sizing: border-box;
}

.cell {
  width: 25%;
}
.cell .wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  height: 10rem;
  margin: 1rem 1rem 0;
  padding-top: 2.2rem;
  background: rgba(255, 255, 255, 0.2);
}
.cell .wrapper::after {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0.2rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.25);
  /* Increment the section counter */
  counter-increment: spinnerCount;
  /* Display the counter on pseudo-elements */
  content: counter(spinnerCount);
}

.spinner {
  width: 4rem;
  height: 4rem;
}
.spinner.spinner1 {
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  -webkit-animation: rotation .8s ease infinite;
          animation: rotation .8s ease infinite;
}
.spinner.spinner2 {
  border: 3px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.5);
  border-bottom-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  -webkit-animation: rotation .8s ease infinite;
          animation: rotation .8s ease infinite;
}
.spinner.spinner3 {
  border-top: 3px solid rgba(0, 0, 0, 0.5);
  border-right: 3px solid transparent;
  border-radius: 50%;
  -webkit-animation: rotation .8s linear infinite;
          animation: rotation .8s linear infinite;
}
.spinner.spinner4 {
  background: rgba(0, 0, 0, 0.5);
  -webkit-animation: flip 1.2s ease infinite;
          animation: flip 1.2s ease infinite;
}
.spinner.spinner5 {
  margin-top: 2rem;
  overflow: hidden;
  position: relative;
  height: .5rem;
  background: rgba(255, 255, 255, 0.25);
}
.spinner.spinner5::before {
  content: '';
  position: absolute;
  left: -130%;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  -webkit-animation: progress 4s linear infinite;
          animation: progress 4s linear infinite;
}
.spinner.spinner6 {
  position: absolute;
  top: 45%;
  left: 50%;
  background: #fff;
  border-radius: 50%;
  -webkit-animation: pulse 1s ease-in-out infinite;
          animation: pulse 1s ease-in-out infinite;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
}
.spinner.spinner7 {
  position: relative;
}
.spinner.spinner7::before, .spinner.spinner7::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
}
.spinner.spinner7::before {
  background: #fff;
  -webkit-animation: pulse2 2s ease-in-out infinite;
          animation: pulse2 2s ease-in-out infinite;
}
.spinner.spinner7::after {
  background: #fff;
  -webkit-animation: pulse2 2s 1s ease-in-out infinite;
          animation: pulse2 2s 1s ease-in-out infinite;
}
.spinner.spinner8 {
  position: relative;
  -webkit-perspective: 200px;
          perspective: 200px;
}
.spinner.spinner8::before {
  display: block;
  content: '';
  width: 50%;
  height: 50%;
  background: rgba(0, 0, 0, 0.5);
  -webkit-animation: 2s flipWalker ease infinite;
          animation: 2s flipWalker ease infinite;
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
            transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
            transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
  }
  100% {
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
            transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
  }
}
@keyframes flip {
  0% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
            transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
            transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
  }
  100% {
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
            transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
  }
}
@-webkit-keyframes progress {
  0% {
    left: -130%;
    background: rgba(0, 0, 0, 0.5);
  }
  50% {
    left: 130%;
    background: rgba(0, 0, 0, 0.5);
  }
  51% {
    background: rgba(255, 255, 255, 0.5);
  }
  100% {
    background: rgba(255, 255, 255, 0.5);
  }
}
@keyframes progress {
  0% {
    left: -130%;
    background: rgba(0, 0, 0, 0.5);
  }
  50% {
    left: 130%;
    background: rgba(0, 0, 0, 0.5);
  }
  51% {
    background: rgba(255, 255, 255, 0.5);
  }
  100% {
    background: rgba(255, 255, 255, 0.5);
  }
}
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}
@keyframes pulse {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}
@-webkit-keyframes pulse2 {
  0%, 100% {
    -webkit-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  50% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}
@keyframes pulse2 {
  0%, 100% {
    -webkit-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  50% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}
@-webkit-keyframes flipWalker {
  0% {
    -webkit-transform: translate(0, 0) rotateX(0) rotateY(0);
            transform: translate(0, 0) rotateX(0) rotateY(0);
  }
  25% {
    -webkit-transform: translate(100%, 0) rotateX(0) rotateY(180deg);
            transform: translate(100%, 0) rotateX(0) rotateY(180deg);
  }
  50% {
    -webkit-transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
            transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
  }
  75% {
    -webkit-transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
            transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotateX(0) rotateY(360deg);
            transform: translate(0, 0) rotateX(0) rotateY(360deg);
  }
}
@keyframes flipWalker {
  0% {
    -webkit-transform: translate(0, 0) rotateX(0) rotateY(0);
            transform: translate(0, 0) rotateX(0) rotateY(0);
  }
  25% {
    -webkit-transform: translate(100%, 0) rotateX(0) rotateY(180deg);
            transform: translate(100%, 0) rotateX(0) rotateY(180deg);
  }
  50% {
    -webkit-transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
            transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
  }
  75% {
    -webkit-transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
            transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotateX(0) rotateY(360deg);
            transform: translate(0, 0) rotateX(0) rotateY(360deg);
  }
}

CSS Simple bảng giá tác thiết kế

Demo


Đầu tiền các bạn chèn đoạn css dưới vào:

<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"></link>
<style>
.demo{
            padding: 2em 0;
        }
        :root{
            --pricingTable-yellow: #faac01;
            --pricingTable-purple: #be4f91;
            --pricingTable-blue: #0192af;
        }
        .demo{ background: #dedddb; }
        .pricingTable{
            padding-bottom: 10px;
            background: #fff;
            border-bottom: 15px solid var(--pricingTable-yellow);
            text-align: center;
            overflow: hidden;
            position: relative;
        }
        .pricingTable:before{
            content: "";
            width: 100%;
            height: 350px;
            background: var(--pricingTable-yellow);
            position: absolute;
            top: -150px;
            left: 0;
            transform: skewY(-20deg);
        }
        .pricingTable .pricingTable-header{
            padding: 20px 20px 60px;
            text-align: left;
            position: relative;
        }
        .pricingTable .title{
            font-size: 30px;
            font-weight: 600;
            color: #fff;
            text-transform: uppercase;
            margin: 0;
        }
        .pricingTable .sub-title{
            display: block;
            font-size: 16px;
            color: #fff;
            text-transform: uppercase;
        }
        .pricingTable .year{
            width: 80px;
            height: 55px;
            background: #fff;
            padding: 7px 0;
            font-size: 15px;
            font-weight: 600;
            font-style: italic;
            color: var(--pricingTable-yellow);
            text-align: center;
            position: absolute;
            top: 30px;
            right: 20px;
            z-index: 1;
        }
        .pricingTable .year:before,
        .pricingTable .year:after{
            content: "";
            width: 57px;
            height: 57px;
            background: #fff;
            position: absolute;
            top: -28px;
            left: 50%;
            z-index: -1;
            transform: translateX(-50%) scaleY(0.5) rotate(45deg);
        }
        .pricingTable .year:after{
            top: auto;
            bottom: -28px;
        }
        .pricingTable .price-value{
            display: inline-block;
            width: 170px;
            height: 110px;
            padding: 15px;
            border: 2px solid var(--pricingTable-yellow);
            border-top: none;
            border-bottom: none;
            position: relative;
        }
        .pricingTable .price-value:before,
        .pricingTable .price-value:after{
            content: "";
            width: 121px;
            height: 121px;
            border: 3px solid var(--pricingTable-yellow);
            border-right: none;
            border-bottom: none;
            position: absolute;
            top: -60px;
            left: 50%;
            transform: translateX(-50%) scaleY(0.5) rotate(45deg);
        }
        .pricingTable .price-value:after{
            border-top: none;
            border-left: none;
            border-bottom: 3px solid var(--pricingTable-yellow);
            border-right: 3px solid var(--pricingTable-yellow);
            top: auto;
            bottom: -60px;
        }
        .pricingTable .value{
            width: 100%;
            height: 100%;
            background: #fff;
            border: 2px solid var(--pricingTable-yellow);
            border-top: none;
            border-bottom: none;
            color: var(--pricingTable-yellow);
            z-index: 1;
            position: relative;
        }
        .pricingTable .value:before,
        .pricingTable .value:after{
            content: "";
            width: 97px;
            height: 97px;
            background: #fff;
            border: 3px solid var(--pricingTable-yellow);
            border-bottom: none;
            border-right: none;
            position: absolute;
            top: -48px;
            left: 50%;
            z-index: -1;
            transform: translateX(-50%) scaleY(0.5) rotate(45deg);
        }
        .pricingTable .value:after{
            border-right: 3px solid var(--pricingTable-yellow);
            border-bottom: 3px solid var(--pricingTable-yellow);
            border-top: none;
            border-left: none;
            top: auto;
            bottom: -48px;
        }
        .pricingTable .currency{
            display: inline-block;
            font-size: 30px;
            margin-top: 7px;
            vertical-align: top;
        }
        .pricingTable .amount{
            display: inline-block;
            font-size: 40px;
            font-weight: 600;
            line-height: 65px;
        }
        .pricingTable .amount span{
            display: inline-block;
            font-size: 30px;
            font-weight: normal;
            vertical-align: top;
            margin-top: -7px;
        }
        .pricingTable .month{
            display: block;
            font-size: 16px;
            line-height: 0;
        }
        .pricingTable .pricing-content{
            padding: 50px 0 0 80px;
            margin-bottom: 20px;
            list-style: none;
            text-align: left;
            transition: all 0.3s ease 0s;
        }
        .pricingTable .pricing-content li{
            padding: 7px 0;
            font-size: 16px;
            color: #808080;
            position: relative;
        }
        .pricingTable .pricing-content li:before,
        .pricingTable .pricing-content li.disable:before{
            content: "\f00c";
            font-family: fontawesome;
            width: 25px;
            height: 25px;
            line-height: 25px;
            border-radius: 50%;
            background: #98c458;
            text-align: center;
            color: #fff;
            position: absolute;
            left: -50px;
        }
        .pricingTable .pricing-content li.disable:before{
            content: "\f00d";
            background: #fe6c6c;
        }
        .pricingTable .pricingTable-signup{
            display: inline-block;
            width: 60%;
            height: 50px;
            line-height: 50px;
            font-size: 22px;
            font-weight: 700;
            color: var(--pricingTable-yellow);
            text-transform: uppercase;
            border: 2px solid var(--pricingTable-yellow);
            margin: 0 auto 10px;
            position: relative;
            transition: all 0.3s ease 0s;
        }
        .pricingTable .pricingTable-signup:hover{
            background: var(--pricingTable-yellow);
            color: #fff;
        }
        .pricingTable.purple{ border-bottom-color: var(--pricingTable-purple); }
        .pricingTable.purple:before{ background: var(--pricingTable-purple); }
        .pricingTable.purple .year{ color: var(--pricingTable-purple); }
        .pricingTable.purple .price-value{
            border-left-color: var(--pricingTable-purple);
            border-right-color: var(--pricingTable-purple);
        }
        .pricingTable.purple .price-value:before{
            border-left-color: var(--pricingTable-purple);
            border-top-color: var(--pricingTable-purple);
        }
        .pricingTable.purple .price-value:after{
            border-right-color: var(--pricingTable-purple);
            border-bottom-color: var(--pricingTable-purple);
        }
        .pricingTable.purple .value{
            border-left-color: var(--pricingTable-purple);
            border-right-color: var(--pricingTable-purple);
            color: var(--pricingTable-purple);
        }
        .pricingTable.purple .value:before{
            border-left-color: var(--pricingTable-purple);
            border-top-color: var(--pricingTable-purple);
        }
        .pricingTable.purple .value:after{
            border-right-color: var(--pricingTable-purple);
            border-bottom-color: var(--pricingTable-purple);
        }
        .pricingTable.purple .pricingTable-signup{
            color: var(--pricingTable-purple);
            border-color: var(--pricingTable-purple);
        }
        .pricingTable.purple .pricingTable-signup:hover{
            color: #fff;
            background: var(--pricingTable-purple);
        }
        .pricingTable.blue{ border-bottom-color: var(--pricingTable-blue); }
        .pricingTable.blue:before{ background: var(--pricingTable-blue); }
        .pricingTable.blue .year{ color: var(--pricingTable-blue); }
        .pricingTable.blue .price-value{
            border-left-color: var(--pricingTable-blue);
            border-right-color: var(--pricingTable-blue);
        }
        .pricingTable.blue .price-value:before{
            border-left-color: var(--pricingTable-blue);
            border-top-color: var(--pricingTable-blue);
        }
        .pricingTable.blue .price-value:after{
            border-right-color: var(--pricingTable-blue);
            border-bottom-color: var(--pricingTable-blue);
        }
        .pricingTable.blue .value{
            border-left-color: var(--pricingTable-blue);
            border-right-color: var(--pricingTable-blue);
            color: var(--pricingTable-blue);
        }
        .pricingTable.blue .value:before{
            border-left-color: var(--pricingTable-blue);
            border-top-color: var(--pricingTable-blue);
        }
        .pricingTable.blue .value:after{
            border-right-color: var(--pricingTable-blue);
            border-bottom-color: var(--pricingTable-blue);
        }
        .pricingTable.blue .pricingTable-signup{
            color: var(--pricingTable-blue);
            border-color: var(--pricingTable-blue);
        }
        .pricingTable.blue .pricingTable-signup:hover{
            color: #fff;
            background: var(--pricingTable-blue);
        }
        @media only screen and (max-width: 990px){
            .pricingTable{ margin-bottom: 30px; }
        }
        @media only screen and (max-width: 767px){
            .pricingTable:before{ transform: skewY(-15deg); }
            .pricingTable .title{ font-size: 22px; }
        }
</style>

Tiếp theo là đoạn mã code hiển thị:

 <div class="demo">
          <div class="container">
              <div class="row">
                  <div class="col-md-4 col-sm-6">
                      <div class="pricingTable">
                          <div class="pricingTable-header">
                              <h3 class="title">Standard</h3>
                              <span class="sub-title">Lorem ipsum</span>
                              <span class="year">Pay only <br>$110/year</span>
                          </div>
                          <div class="price-value">
                              <div class="value">
                                  <span class="currency">$</span>
                                  <span class="amount">10.<span>99</span></span>
                                  <span class="month">/month</span>
                              </div>
                          </div>
                          <ul class="pricing-content">
                              <li>50GB Disk Space</li>
                              <li>50 Email Accounts</li>
                              <li>50GB Monthly Bandwidth</li>
                              <li class="disable">10 Subdomains</li>
                              <li class="disable">15 Domains</li>
                          </ul>
                          <a href="#" class="pricingTable-signup">Sign up</a>
                      </div>
                  </div>

                  <div class="col-md-4 col-sm-6">
                      <div class="pricingTable purple">
                          <div class="pricingTable-header">
                              <h3 class="title">Business</h3>
                              <span class="sub-title">Lorem ipsum</span>
                              <span class="year">Pay only <br>$220/year</span>
                          </div>
                          <div class="price-value">
                              <div class="value">
                                  <span class="currency">$</span>
                                  <span class="amount">20.<span>99</span></span>
                                  <span class="month">/month</span>
                              </div>
                          </div>
                          <ul class="pricing-content">
                              <li>60GB Disk Space</li>
                              <li>60 Email Accounts</li>
                              <li>60GB Monthly Bandwidth</li>
                              <li>15 Subdomains</li>
                              <li class="disable">20 Domains</li>
                          </ul>
                          <a href="#" class="pricingTable-signup">Sign up</a>
                      </div>
                  </div>

                  <div class="col-md-4 col-sm-6">
                      <div class="pricingTable blue">
                          <div class="pricingTable-header">
                              <h3 class="title">Premium</h3>
                              <span class="sub-title">Lorem ipsum</span>
                              <span class="year">Pay only <br>$330/year</span>
                          </div>
                          <div class="price-value">
                              <div class="value">
                                  <span class="currency">$</span>
                                  <span class="amount">30.<span>99</span></span>
                                  <span class="month">/month</span>
                              </div>
                          </div>
                          <ul class="pricing-content">
                              <li>70GB Disk Space</li>
                              <li>70 Email Accounts</li>
                              <li>70GB Monthly Bandwidth</li>
                              <li>20 Subdomains</li>
                              <li>25 Domains</li>
                          </ul>
                          <a href="#" class="pricingTable-signup">Sign up</a>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  
 </div>

Code Slider Post Làm Trang Chủ

Demo

Đầu tiên chèn đoạn css dưới:

<link href="css/style.css" rel="stylesheet" type="text/css"></link>
        <link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet"></link>
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
        <style>
        body,html {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    display: block;
    position: relative;
    overflow: hidden;
    font-family: 'Slabo 27px', serif;
    font-size: 16px;
}

h1,h2,h3,h4,h5,h6 {
    padding: 0;
    margin: 0;
}
ul,li,p {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}
.wrapper {
    height: 100%;
    width: 100%;
    display: block;
    overflow: hidden;
}
.wrapper .container {
    height: 100%;
    width: 100%;
    display: block;
    overflow: hidden;
}

.slideshow {
    height: 100%;
    width: 100%;
    display: block;
    overflow: hidden;
}
.slideshow .slideshow-left {
    width: 40%;
    float: left;
    position: relative;
    height: 100%;
}
.slideshow .slideshow-left .Lslide {
    height: 100%;
    display: block;
    overflow: hidden;
    position: absolute;
    bottom: 0px;
    top: 0;
    left: 0;
    right: 0;
}  
.slideshow .Lslide-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}
.slideshow .Lslide-content h2 {
    color: #fff;
    font-weight: 600;
    font-size: 60px;
    line-height: 0.8;
}
.slideshow .Lslide-content p {
    color: #fff;
    padding: 2.5em 0em;
}
.slideshow .Lslide-content .button {
    background-color: #fff;
    display: inline-block;
    border-radius: 25px;
    position: relative;
}
.slideshow .Lslide-content .button i {
    float: right;
    position: absolute;
    top: 50%;
    right: 2.5em;
    color: #000;
    font-size: 9px;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transition: all 0.3s;
}
.slideshow .Lslide-content .button:hover i {
    right: 1.7em;
}
.slideshow .Lslide-content .button p {
    margin: 0;
    padding: 0;
    color: #000;
    text-align: left;
    padding: 0.8em 8em 0.8em 1.5em;
    font-size: 12px;
    font-weight: 600;
}
.slideshow .slideshow-right {
    width: 60%;
    float: left;
    position: relative;
    height: 100%;    
}     
.slideshow .slideshow-right .Rslide {
    height: 100%;
    display: block;
    overflow: hidden;
    position: absolute;
    bottom: 0px;
    top: 0;
    left: 0;
    right: 0;
}  
.slideshow .slideshow-right .Rslide img {
    min-width: 100%;
}
.control {
    position: absolute;
    left: 40%;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}    
.control i {
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    text-align: center;
    position: absolute;
    color: #aaaaaa;
    transition: all 0.3s;
    -ms-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
}    
.control .control-top {
    width: 45px;
    height: 50px;
    background-color: #fff;
    z-index: 5;
    position: relative;
    border-radius: 0px 4px 4px 0px;
    cursor: pointer;
}
.control .control-top:hover i {
    color: #333333;
}
.control .control-bottom {
    width: 45px;
    height: 50px;
    background-color: #fff;
    z-index: 5;
    position: relative;
    border-radius: 4px 0px 0px 4px;
    left: -45px;
    cursor: pointer;
}  
.control .control-bottom:hover i {
    color: #333333;
}              
        </style>

Tiếp theo là đoạn code hiển thị:

 <div class="wrapper">
           <div class="container">

               <div class="slideshow">

                    <div class="slideshow-left">

                        <div class="Lslide">
                            <div class="Lslide-content">
                                <h2>Probably not</h2>
                                <p>Be a part of our creation</p>

                                <div class="button">
                                    <a href="#">
                                        <p>More</p>
                                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="Lslide">
                            <div class="Lslide-content">
                                <h2>But not today</h2>
                                <p>Be a part of our creation</p>

                                <div class="button">
                                    <a href="#">
                                        <p>More</p>
                                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="Lslide">
                            <div class="Lslide-content">
                                <h2>Probably not</h2>
                                <p>Be a part of our creation</p>

                                <div class="button">
                                    <a href="#">
                                        <p>More</p>
                                        <i class="fa fa-chevron-right" aria-hidden="true"></i>
                                    </a>
                                </div>
                            </div>
                        </div>   

                    </div>

                    <div class="slideshow-right">

                        <div class="Rslide">
                            <img src="http://www.grandvincent-marion.fr/_codepen/flower-3.jpg" alt="">
                        </div>

                        <div class="Rslide">
                            <img src="http://www.grandvincent-marion.fr/_codepen/flower-5.jpg" alt="">
                        </div>    
                        <div class="Rslide">
                            <img src="http://www.grandvincent-marion.fr/_codepen/flower-1.jpg" alt="">
                        </div>                                             
                    </div>   

                   
                    <div class="control">
                        <div class="oncontrol control-top">
                            <i class="fa fa-arrow-up" aria-hidden="true"></i>
                        </div>
                        <div class="oncontrol control-bottom">
                            <i class="fa fa-arrow-down" aria-hidden="true"></i>
                        </div>                         
                    </div>

               </div>

           </div>
       </div>

Cuối cùng chèn đoạn mã JS dưới đây nữa là xong:

<script>
var Lslide      = document.querySelectorAll('.Lslide'),
    Rslide      = document.querySelectorAll('.Rslide'),
    control     = document.querySelectorAll('.oncontrol'),
    slideHeight = document.querySelector('.wrapper').clientHeight,
    color = ['#fdc97c', '#e5d3d0', '#71b3d6'],
    index = 0;


function init() {
    slideHeight = document.querySelector('.wrapper').clientHeight;
    for (i = 0; i < Lslide.length; i++) {
        Lslide[i].style.backgroundColor = color[i];
        Lslide[i].style.top = -slideHeight * i + "px";
        Rslide[i].style.top = slideHeight * i + "px";
    } 
}
init()
window.addEventListener('resize', function(){
    init()
});

function moveToTop() {

    index++;
    for (el = 0; el < Lslide.length; el++) {
        Lslide[el].style.top = parseInt(Lslide[el].style.top) + slideHeight + "px";
        Rslide[el].style.top = parseInt(Rslide[el].style.top) - slideHeight + "px";
    }

    if (index > Lslide.length-1) {
        index = 0;
        for (el = 0; el < Lslide.length; el++) {
            Lslide[el].style.top = -slideHeight * el + "px";
            Rslide[el].style.top = slideHeight * el + "px";
        }
    }
}

function moveToBottom() {
    index--;
    for (el = 0; el < Lslide.length; el++) {
        Lslide[el].style.top = parseInt(Lslide[el].style.top) - slideHeight + "px";
        Rslide[el].style.top = parseInt(Rslide[el].style.top) + slideHeight + "px";
       
    }
    if (index < 0) {
        index = Rslide.length-1;
        for (el = 0; el < Lslide.length; el++) {
            Lslide[el].style.top = parseInt(Lslide[el].style.top) + slideHeight * Lslide.length + "px";
            Rslide[el].style.top = parseInt(Rslide[el].style.top) - slideHeight * Rslide.length + "px";
        }
    }
}

function transition() {
    for (t = 0; t < Lslide.length; t++) {
        Lslide[t].style.transition = "all 0.8s";
        Rslide[t].style.transition = "all 0.8s";
    }
}
 

for (t = 0; t < control.length; t++) {
    control[t].addEventListener("click", function() {

        if (this.classList.contains('control-top')) {
            moveToTop()
        }
        if (this.classList.contains('control-bottom')) {
            moveToBottom()
        }

        transition()
  
    });
}

var wheeling;
function mousemouve(e) {

    clearTimeout(wheeling);
    e.preventDefault();
    var e = window.event || e;
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
   
    wheeling = setTimeout(function() {
        wheeling = undefined;
        if (delta === 1) {
            moveToTop()
        }
        if (delta === -1) {
            moveToBottom()
        }
    }, 100);

    transition()
}

document.addEventListener("mousewheel", mousemouve);
document.addEventListener("DOMMouseScroll", mousemouve);
</script>

Code khung tác giả đẹp

DEMO: http://codepen.io/Beohoavinh/full/rjbLqx/

Chèn code hiện thị:

<section>
<input type="radio" id="profile" value="1" name="tractor" checked='checked' />    
<input type="radio" id="settings" value="2" name="tractor" />      
<input type="radio" id="posts" value="3" name="tractor" />
<input type="radio" id="books" value="4" name="tractor" />
  
  <nav>   
  <label for="profile" class='fontawesome-camera-retro'></label>
  <label for="settings" class='fontawesome-film'></label>
  <label for="posts" class='fontawesome-calendar'></label>
  <label for="books" class='fontawesome-list-alt'></label>
  </nav>
  
  <article class='uno'>
    <h2>
      <img alt=''  src='http://demo.htmleaf.com/1411/201411211523/head-photo.jpg' />
      Bẽo
      <span>Chia se 78</span></h2>
   <footer>
    <ul>
      <li class='fontawesome-link'></li>
      <li class='fontawesome-paper-clip'></li>
      <li class='fontawesome-sitemap'></li>
      <li class='fontawesome-wrench'></li>
      <li class='fontawesome-magic'></li>
    </ul>
   </footer>
  </article>
  
  <article class='dos fontawesome-wrench'>
    <p>I'm hurting baby, I'm broken down 
I need your loving, loving 
I need it now 
When I'm without you 
I'm something weak 
You got me begging, begging 
I'm on my knees 
I don't wanna be needing your love 
I just wanna be deep in your love 
And it's killing me when you're away 
Ooh baby, cause a bullet don't care where you are 
I just wanna be there where you are 
And I gotta get one little taste 
</p>
  </article>
  
  <article class='tres fontawesome-file-alt'>
    <ol>
      <li>Won't you come and put it down on me 
</li>
      <li>Oh right here, cause I need 
</li>
      <li>Little love and little sympathy 
</li>
      <li>Yeah you show me good loving 
</li>
      <li>Make it alright 
 </li>
      <li>Need a little a sweetness in my life 
</li>
    </ol>
  </article>
  
  <article class='cuatro fontawesome-copy'>
    <dl>
      <dt>My broken pieces 
</dt>
      <dd>You pick them up 
Don't leave me hanging, hanging 
Come give me some </dd>
      <dt>Won't you come and put it down on me 
</dt>
      <dd>Oh right here, cause I need 
Little love and little sympathy 
Yeah you show me good loving 
Make it alright </dd>
    </dl>
  </article>
</section>

@import url(http://fonts.googleapis.com/css?family=Dosis:600,200|Great+Vibes);
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
*, *:after, *:before {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
* {margin:0;padding:0;border: 0 none;position: relative;}
[class*="fontawesome-"]:before {font-family: 'fontawesome', sans-serif;}

html {
  background: #33485E;
  width: 100%;
  height: 100%;
  font-family: dosis, sans-serif;
  font-weight: 300;
  color: #fff;
}

section {
  background: #31A66C;
  width: 80vw;
  max-width: 40rem;
  min-width: 390px;
  height: 25rem;
  margin: 4rem auto;
  box-shadow: 0 0 6px rgba(0,0,0,.4);
}
article {
  position: absolute;
  left: 0;
  top: 5rem;
  right: 0;
  bottom: 0;
  padding: 1rem 2rem 0;
  overflow: auto;
  transition: .7s;
  transform: scale(0);
  transform-origin: center right;
  transition-delay: .1s;
}
article:before {
  color: rgba(0,0,0,.2);
  font-size: 4rem;
  font-weight: 100;
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}
h2 {
  font-size: 2.5rem;
  font-weight: 600;
  text-align: center;
  color: rgba(0,0,0,.6);
}
h2 img {
  width: 120px;
  height: auto;
  background: #f9f9f9;
  border: 5px solid rgba(0,0,0,.7);
  border-radius: 50%;
  padding: 5px;
  display: block;
  margin: 0 auto;
  box-shadow: 0 0 7px rgba(0,0,0,.5);
}
h2 span {
  font-family: Great Vibes;
  font-weight: 400;
  display: block;
  margin-bottom: 1rem;
}
footer ul {
  width: 100%;
  color: #037B49;
}
footer li {
  list-style-type: none;
  float: left;
  width: 20%;
  text-align: center;
  font-size: 3rem;
  font-weight: 100;  
}
p, dl, ol {
  line-height: 1.5;
  font-size: 1.3rem;
}
ol li {margin: 0 0 .5rem 1rem;}
dt {
  font-size: 1.6rem;
  font-weight: 600;
  text-indent: 1.5rem;
}
nav {
  background: #fff;
  width: 100%;
  height: 5rem;
  box-shadow: 0 0 6px rgba(0,0,0,.4);
}
nav:after {
  content:'';
  width: 25%;
  height: 5rem;
  background: #BEE3D1;
  position: absolute;
  transition: .5s;
}
input {
  display: none;
}
label {
  width: 25%;
  float: left;
  color: #BEE3D1;
  text-align: center;
  cursor: pointer;
  transition: .5s;
  z-index: 2;
}
label:hover {color: #1E6743;}
label:before {
  display: block;
  font-size: 3rem;
  line-height: 5rem;
  z-index: 2;
}
#profile:checked ~ nav [for='profile'],
#settings:checked ~ nav [for='settings'],
#posts:checked ~ nav [for='posts'],
#books:checked ~ nav [for='books'] {
  color: #1E6743;
  font-weight: 600;
}
#settings:checked ~ nav [for='settings'] {}
#profile:checked ~ nav [for='profile'] {}

#profile:checked ~ nav:after {
  left: 0;
}
#settings:checked ~ nav:after {
  left:25%;
  border-top: 0 none;
}
#posts:checked ~ nav:after {
  left: 50%;
}
#books:checked ~ nav:after {
  left: 75%;
}

#profile:checked ~ .uno,
#settings:checked ~ .dos,
#posts:checked ~ .tres,
#books:checked ~ .cuatro {
  display: block;
  transform: scale(1);
  transition-delay: .5s; 
}
a {color: rgba(0,0,0,.4)}
a:hover {color: rgba(0,0,0,.2)}

Hiệu ứng Button cực đẹp

DEMO: http://codepen.io/Beohoavinh/full/ygrJOw/

Code:

	<button class="draw">draw</button>
			<button class="draw meet">draw meet</button>
			<button class="center">center</button>
			<button class="spin">spin</button>
			<button class="spin circle">spin circle</button>
			<button class="spin thick">spin thick</button>

CSS:

button {
  background: none;
  border: 0;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 2px #f45e61;
  color: #f45e61;
  font-size: inherit;
  font-weight: 700;
  margin: 1em;
  padding: 1em 2em;
  text-align: center;
  text-transform: capitalize;
  position: relative;
  vertical-align: middle;
}
button::before, button::after {
  box-sizing: border-box;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}

.draw {
  -webkit-transition: color 0.25s;
          transition: color 0.25s;
}
.draw::before, .draw::after {
  border: 2px solid transparent;
  width: 0;
  height: 0;
}
.draw::before {
  top: 0;
  left: 0;
}
.draw::after {
  bottom: 0;
  right: 0;
}
.draw:hover {
  color: #60daaa;
}
.draw:hover::before, .draw:hover::after {
  width: 100%;
  height: 100%;
}
.draw:hover::before {
  border-top-color: #60daaa;
  border-right-color: #60daaa;
  -webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
          transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.draw:hover::after {
  border-bottom-color: #60daaa;
  border-left-color: #60daaa;
  -webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
          transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}

.meet:hover {
  color: #fbca67;
}
.meet::after {
  top: 0;
  left: 0;
}
.meet:hover::before {
  border-top-color: #fbca67;
  border-right-color: #fbca67;
}
.meet:hover::after {
  border-bottom-color: #fbca67;
  border-left-color: #fbca67;
  -webkit-transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;
          transition: height 0.25s ease-out, width 0.25s ease-out 0.25s;
}

.center:hover {
  color: #6477b9;
}
.center::before, .center::after {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center;
}
.center::before {
  border-top: 2px solid #6477b9;
  border-bottom: 2px solid #6477b9;
  -webkit-transform: scale3d(0, 1, 1);
          transform: scale3d(0, 1, 1);
}
.center::after {
  border-left: 2px solid #6477b9;
  border-right: 2px solid #6477b9;
  -webkit-transform: scale3d(1, 0, 1);
          transform: scale3d(1, 0, 1);
}
.center:hover::before, .center:hover::after {
  -webkit-transform: scale3d(1, 1, 1);
          transform: scale3d(1, 1, 1);
  -webkit-transition: -webkit-transform 0.5s;
          transition: transform 0.5s;
}

.spin {
  width: 6em;
  height: 6em;
  padding: 0;
}
.spin:hover {
  color: #0eb7da;
}
.spin::before, .spin::after {
  top: 0;
  left: 0;
}
.spin::before {
  border: 2px solid transparent;
}
.spin:hover::before {
  border-top-color: #0eb7da;
  border-right-color: #0eb7da;
  border-bottom-color: #0eb7da;
  -webkit-transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
          transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}
.spin::after {
  border: 0 solid transparent;
}
.spin:hover::after {
  border-top: 2px solid #0eb7da;
  border-left-width: 2px;
  border-right-width: 2px;
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg);
  -webkit-transition: -webkit-transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
          transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
}

.circle {
  border-radius: 100%;
  box-shadow: none;
}
.circle::before, .circle::after {
  border-radius: 100%;
}

.thick {
  color: #f45e61;
}
.thick:hover {
  color: #fff;
  font-weight: 700;
}
.thick::before {
  border: 3em solid transparent;
  z-index: -1;
}
.thick::after {
  mix-blend-mode: color-dodge;
  z-index: -1;
}
.thick:hover::before {
  background: #f45e61;
  border-top-color: #f45e61;
  border-right-color: #f45e61;
  border-bottom-color: #f45e61;
  -webkit-transition: background 0s linear 0.4s, border-top-color 0.15s linear, border-right-color 0.15s linear 0.15s, border-bottom-color 0.15s linear 0.25s;
  transition: background 0s linear 0.4s, border-top-color 0.15s linear, border-right-color 0.15s linear 0.15s, border-bottom-color 0.15s linear 0.25s;
}
.thick:hover::after {
  border-top: 3em solid #f45e61;
  border-left-width: 3em;
  border-right-width: 3em;
}

Code tác giả ẩn hiện chất

DEMO: http://codepen.io/Beohoavinh/full/PWgNap/

Chèn Code Dưới vào sau /header:

 <link href="http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

<div class="container">
			<div class="menu-wrap">
				<nav class="menu-top">
					<div class="profile"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlQeHPOd0MfDFyH578k2wTQi23d4zKE0nxA_aiRbk17bg1gEk7q476DUINycfLPI7_jNPf9KF4Lb1KauFi13Q_u0KT1pBNAFFQLf009zADLcozsnijf9kF32eYRfDU7KkRJRAo2J3Vx54/s1600/123213.png" alt="Bẽo Hòa Vinh"/><span>Bẽo Hòa Vinh</span></div>
					<div class="icon-list">
						<a href="#"><i class="fa fa-fw fa-star-o"></i></a>
						<a href="#"><i class="fa fa-fw fa-bell-o"></i></a>
						<a href="#"><i class="fa fa-fw fa-envelope-o"></i></a>
						<a href="#"><i class="fa fa-fw fa-comment-o"></i></a>
					</div>
				</nav>
				<nav class="menu-side">
					<a href="#">Recent Stories</a>
					<a href="#">Reading List</a>
					<a href="#">My Stories</a>
					<a href="#">Categories</a>
				</nav>
			</div>
			<button class="menu-button" id="open-button"></button>
			<div class="content-wrap">
				<div class="content">
					<header class="codrops-header">
						<h1>Chia Sẻ 78 <span>TÁC GIẢ ẨN HIỆN</span></h1>
					 <p>
        ĐI ĐỂ TRỞ VỀ <br/>
Sáng tác: Tiên Cookie <br/>
<br/>
Verse: <br/>
Tôi đang ở một nơi rất xa, nơi không<br/> có khói bụi thành phố <br/>
Ở một nơi đẹp như mơ <br/>
Trên cao êm êm mây trắng bay lặng nhìn<br/> biển rộng sóng vỗ <br/>
Cuộc đời tôi là những chuyến đi dài <br/>
<br/>
Pre: <br/>
Vượt suối thác, vượt núi dốc, dù chênh<br/> vênh, có xá gì <br/>
Có biết bao thứ tươi đẹp vẫn cứ ở đó<br/> đang chờ tôi <br/>
Người xung quanh ở nơi đây thật dễ mến<br/> dẫu mới gặp <br/>
Ánh mắt lấp lánh hiền hoà chào tôi<br/> chào người bạn mới <br/>
<br/>
Chorus: <br/>
Từng chặng đường dài mà ta qua, giờ<br/> ngồi một mình lại thấy nhớ <br/>
Ngày ngày mặt trời rạng ngời vươn cao<br/> lên từ trên mái nhà <br/>
Từng chặng đường dài mà ta qua đều để<br/> lại kỉ niệm quý giá <br/>
Để lại một điều rằng càng đi xa ta<br/> càng thêm nhớ nhà <br/>
<br/>
Đi thật xa để trở về <br/>
Đi thật xa để trở về <br/>
Có một nơi để trở về <br/>
Đi, Đi để trở về <br/>
<br/>
Verse II: <br/>
Tôi đang ở một nơi rất xa, nơi không<br/> có khói bụi thành phố<br/> 
Ở một nơi đẹp như mơ <br/>
Trên cao êm êm mây trắng bay lặng nhìn<br/> biển rộng sóng vỗ <br/>
Cuộc đời tôi là những chuyến đi dài <br/>
<br/>
pre: <br/>
Vượt suối thác, vượt núi dốc, dù chênh<br/> vênh, có xá gì <br/>
Có biết bao thứ tươi đẹp còn đang<br/> trông mong tôi ghé qua <br/>
Người xung quanh ở nơi đây thật dễ mến<br/> dẫu mới gặp <br/>
Ánh mắt lấp lánh hiền hoà chào tôi<br/> chào người bạn mới <br/>
<br/>
Chorus: <br/>
Từng chặng đường dài mà ta qua, giờ<br/> ngồi một mình lại thấy nhớ<br/> 
Ngày ngày mặt trời rạng ngời vươn cao<br/> lên từ trên mái nhà <br/>
Từng chặng đường dài mà ta qua đều để<br/> lại kỉ niệm quý giá <br/>
Để lại một điều rằng càng đi xa ta<br/> càng thêm nhớ nhà <br/>
<br/>
Đi thật xa để trở về <br/>
Đi thật xa để trở về <br/>
Có một nơi để trở về <br/>
Đi, Đi để trở về <br/>
<br/>
Brigde: 
<br/>
Cuộc đời thật đẹp khi được đi muôn nơi<br/> xa xôi rộng lớn <br/>
Nhưng ta vẫn có nơi để trở về sau mỗi<br/> chuyến đi <br/>
Điều kì diệu là con người ta đi xa hơn<br/> để trưởng thành hơn <br/>
Không quên mang theo bên cạnh hành<br/> trang nỗi nhớ gia đình<br/>
      </p>
					</header>
				</div>
			</div><!-- /content-wrap -->
		</div><!-- /container -->

		<script src="http://demo.htmleaf.com/1410/201410182336/js/main.js"></script>

Chèn CSS dưới vào:

.menu-wrap a {
	color: #b8b7ad;
}

.menu-wrap a:hover,
.menu-wrap a:focus {
	color: #c94e50;
}

.content-wrap {
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.content {
	position: relative;
	background: #b4bad2;
}

/* Overlay */
.content::before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.3);
	content: '';
	opacity: 0;
	-webkit-transform: translate3d(100%,0,0);
	transform: translate3d(100%,0,0);
	-webkit-transition: opacity 0.3s, -webkit-transform 0s 0.3s;
	transition: opacity 0.3s, transform 0s 0.3s;
}

/* Menu Button */
.menu-button {
	position: fixed;
	z-index: 1000;
	margin: 1em;
	padding: 0;
	width: 2.5em;
	height: 2.25em;
	border: none;
	text-indent: 2.5em;
	font-size: 1.5em;
	color: transparent;
	background: transparent;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
}

.menu-button::before {
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	bottom: 0.5em;
	left: 0.5em;
	background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%);
	content: '';
}

.menu-button:hover {
	opacity: 0.6;
}
/* Menu */
.menu-wrap {
	position: absolute;
	font-weight: 700;
	opacity: 0;
	-webkit-transition: opacity 1s;
	transition: opacity 1s;
}

.menu-top {
	line-height: 58px;
}

.menu-top .profile {
	display: inline-block;
	padding: 8px 10px;
	line-height: 42px;
}

.menu-top .profile,
.menu-side {
	width: 300px;
}

.menu-top .profile img {
	float: left;
	margin-right: 1em;
      width: 43px;
}

.icon-list {
	display: inline-block;
	font-size: 1.25em;
}

.icon-list a {
	margin: 0 1em 0 0;
	padding: 0;
}

@media screen and (max-width: 32em) {
	.icon-list {
		padding-left: 1em;
	}
}

.menu-side a {
	display: block;
	padding: 1.2em;
	border-bottom: 1px solid rgba(0,0,0,0.1);
}

.menu-side a:first-child {
	border-top: 1px solid rgba(0,0,0,0.1);
}

/* Shown menu */
.show-menu .menu-wrap {
	opacity: 1;
}

.show-menu .content-wrap,
.show-menu .menu-button {
	-webkit-transform: translate3d(300px,60px,0);
	transform: translate3d(300px,60px,0);
}

.show-menu .content::before {
	opacity: 1;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}
/* Header */
.codrops-header {
	margin: 0 auto;
	padding: 3em 2em;
	text-align: center;
	height: 100%;
}

.codrops-header h1 {
	margin: 0 auto;
	font-weight: 800;
	font-size: 3.75em;
	line-height: 1;
}

.codrops-header h1 span {
	display: block;
	font-size: 50%;
	font-weight: 400;
	padding-top: 0.325em;
}

.codrops-links {
	text-transform: uppercase;
	font-weight: 700;
	font-size: 0.69em;
	line-height: 2.2;
	padding: 1.61em 5em;
}

.codrops-links a {
	display: inline-block;
	padding: 0 1em;
	text-decoration: none;
	letter-spacing: 1px;
}

.codrops-icon:before {
	margin: 0 4px;
	text-transform: none;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-family: 'codropsicons';
	line-height: 1;
	speak: none;
	-webkit-font-smoothing: antialiased;
}

.codrops-icon-drop:before {
	content: "\e001";
}

.codrops-icon-prev:before {
	content: "\e004";
}

/* Demo Buttons Style */
.codrops-demos {
	font-size: 1em;
	max-width: 1200px;
	margin: 3em auto 5em;
	padding: 2em 10em 0;
}

.codrops-demos > a {
	display: inline-block;
	margin: 0.75em;
	padding: 1.35em 1.1em;
	width: 15em;
	background: #fffce1;
	outline: none;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 800;
	border-radius: 20px/50px;
}

.codrops-demos > a.current-demo {
	background: #c94e50;
	color: #fffce1;
}

/* Related demos */
.related {
	margin-top: 5em;
	padding: 0 3em 5em;
}

.related p {
	font-size: 1.5em;
	font-weight: 700;
}

.related > a {
	display: inline-block;
	text-align: center;
	margin: 20px 10px;
	padding: 25px;
	border-radius: 35px/200px;
	background: #fffce1;
	max-width: 100%;
}

.related a img {
	max-width: 100%;
	opacity: 0.8;
	border-radius: 20px/100px;
}

.related a:hover img,
.related a:active img {
	opacity: 1;
}

.related a h3 {
	margin: 0;
	padding: 0.5em 0.75em 0.3em;
	max-width: 300px;
	text-align: left;
}

body #cdawrap {
	top: auto;
	bottom: 35px;
	right: 35px;
	background: #b4bad2;
	border: 1px solid rgba(131,135,151,0.6);
}

.demo-wave body #cdawrap {
	top: 35px;
	right: 35px;
	bottom: auto;
}

@media screen and (max-width: 40em) {
	body {
		font-size: 80%;
	}
	.codrops-header h1 {
		font-size: 2.5em;
	}
	.codrops-demos {
		max-width: 900px;
		padding: 2em 2em 0;
	}
	.related > a {
		margin: 20px 0;
	}
}

@media screen and (max-width: 25em) {

	.codrops-icon {
		font-size: 250%;
	}

	.codrops-icon span {
		display: none;
	}

}

Cuối là chèn JS:

<script type="text/javascript">
/*!
 * classie - class helper functions
 * from bonzo https://github.com/ded/bonzo
 * 
 * classie.has( elem, 'my-class' ) -> true/false
 * classie.add( elem, 'my-new-class' )
 * classie.remove( elem, 'my-unwanted-class' )
 * classie.toggle( elem, 'my-class' )
 */

/*jshint browser: true, strict: true, undef: true */
/*global define: false */

( function( window ) {

'use strict';

// class helper functions from bonzo https://github.com/ded/bonzo

function classReg( className ) {
  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}

// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {
  hasClass = function( elem, c ) {
    return elem.classList.contains( c );
  };
  addClass = function( elem, c ) {
    elem.classList.add( c );
  };
  removeClass = function( elem, c ) {
    elem.classList.remove( c );
  };
}
else {
  hasClass = function( elem, c ) {
    return classReg( c ).test( elem.className );
  };
  addClass = function( elem, c ) {
    if ( !hasClass( elem, c ) ) {
      elem.className = elem.className + ' ' + c;
    }
  };
  removeClass = function( elem, c ) {
    elem.className = elem.className.replace( classReg( c ), ' ' );
  };
}

function toggleClass( elem, c ) {
  var fn = hasClass( elem, c ) ? removeClass : addClass;
  fn( elem, c );
}

var classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

// transport
if ( typeof define === 'function' && define.amd ) {
  // AMD
  define( classie );
} else {
  // browser global
  window.classie = classie;
}

})( window );
</script>


<script type="text/javascript">
/**
 * main.js
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2014, Codrops
 * http://www.codrops.com
 */
(function() {

	var bodyEl = document.body,
		content = document.querySelector( '.content-wrap' ),
		openbtn = document.getElementById( 'open-button' ),
		closebtn = document.getElementById( 'close-button' ),
		isOpen = false;

	function init() {
		initEvents();
	}

	function initEvents() {
		openbtn.addEventListener( 'click', toggleMenu );
		if( closebtn ) {
			closebtn.addEventListener( 'click', toggleMenu );
		}

		// close the menu element if the target it´s not the menu element or one of its descendants..
		content.addEventListener( 'click', function(ev) {
			var target = ev.target;
			if( isOpen && target !== openbtn ) {
				toggleMenu();
			}
		} );
	}

	function toggleMenu() {
		if( isOpen ) {
			classie.remove( bodyEl, 'show-menu' );
		}
		else {
			classie.add( bodyEl, 'show-menu' );
		}
		isOpen = !isOpen;
	}

	init();

})();
</script>

Code Button Chất

DEMO: http://codepen.io/Beohoavinh/full/apxNyM/

Chèn code bên dưới vào nơi hiển thị:

<div class="buttons-ctn">
	  <a href="#" class="button button--left"><span>Trái</span></a>
	  <a href="#" class="button button--right"><span>Phải</span></a>
	</div>
	<div class="button__content button__content--left">
	  <h2>Bạn Chọn Trái!</h2>
	  <a href="#">Chả Có Gì Ở Đây Hết :)</a>
	</div>
	<div class="button__content button__content--right">
	  <h2>Bạn Chọn Phải!</h2>
	  <a href="#">Chả Có Gì Ở Đây Hết :)</a>
	</div>

	<main>
	  	<header class="htmleaf-header">
			<h1>Chia Sẻ 78</h1>
			<div class="htmleaf-links">
			</div>
		</header>
	</main>
	
	<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>

Chèn tiếp CSS sau:

.buttons-ctn {
  will-change: transform;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -140px;
  margin-top: -30px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.button {
  will-change: transform;
  position: relative;
  float: left;
  display: inline-block;
  padding: 20px;
  width: 140px;
  text-align: center;
  line-height: normal;
  -webkit-transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.button--left {
  background: #141414;
  color: white;
}
.button--right {
  background: #ebebeb;
  color: #141414;
}
.button--active {
  cursor: default;
}
.button--active span {
  opacity: 0;
}

.button__content {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  padding: 60px 20px;
  text-align: center;
  width: 600px;
  visibility: hidden;
  opacity: 0;
  z-index: 10;
  color: white;
}
.button__content--left {
  color: white;
}
.button__content--left a {
  color: #141414;
  background: white;
}
.button__content--right {
  color: #141414;
}
.button__content--right a {
  color: white;
  background: #141414;
}
.button__content--active {
  opacity: 1;
  visibility: visible;
}
.button__content a {
  display: inline-block;
  padding: 10px 20px;
}
.button__content h2 {
  font-size: 36px;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 300;
}
@media (max-width: 650px) {
  .button__content {
    width: 295px;
  }
}

main {
  color: white;
  text-align: center;
}
main h1 {
  font-weight: 300;
  margin-bottom: 8px;
  margin-top: 24px;
}
main p {
  margin-top: 0;
}
main p a {
  font-size: 20px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  color: rgba(0, 0, 0, 0.6);
}

Cuối cùng là chèn JS nữa là xong:

<script>
	var button = $('.button');
	var content = $('.button__content');
	var win = $(window);
	var expand = function () {
	    if (button.hasClass('button--active')) {
	        return false;
	    } else {
	        var W = win.width();
	        var xc = W / 2;
	        var that = $(this);
	        var thatWidth = that.innerWidth() / 2;
	        var thatOffset = that.offset();
	        var thatIndex = that.index();
	        var other;
	        if (!that.next().is('.button')) {
	            other = that.prev();
	        } else {
	            other = that.next();
	        }
	        var otherWidth = other.innerWidth() / 2;
	        var otherOffset = other.offset();
	        var thatContent = $('.button__content').eq(thatIndex);
	        var thatContentW = thatContent.innerWidth();
	        var thatContentH = thatContent.innerHeight();
	        var thatTransX = xc - thatOffset.left - thatWidth;
	        var otherTransX = xc - otherOffset.left - otherWidth;
	        var thatScaleX = thatContentW / that.innerWidth();
	        var thatScaleY = thatContentH / that.innerHeight();
	        that.css({
	            'z-index': '2',
	            'transform': 'translateX(' + thatTransX + 'px)'
	        });
	        other.css({
	            'z-index': '0',
	            'opacity': '0',
	            'transition-delay': '0.05s',
	            'transform': 'translateX(' + otherTransX + 'px)'
	        });
	        that.on('transitionend webkitTransitionEnd', function () {
	            that.css({ 'transform': 'translateX(' + thatTransX + 'px) scale(' + thatScaleX + ',' + thatScaleY + ')' });
	            that.addClass('button--active');
	            thatContent.addClass('button__content--active');
	            thatContent.css('transition', 'all 1s 0.1s cubic-bezier(0.23, 1, 0.32, 1)');
	            that.off('transitionend webkitTransitionEnd');
	        });
	        return false;
	    }
	};
	var hide = function (e) {
	    var target = $(e.target);
	    if (target.is(content)) {
	        return;
	    } else {
	        button.removeAttr('style').removeClass('button--active');
	        content.removeClass('button__content--active').css('transition', 'all 0.2s 0 cubic-bezier(0.23, 1, 0.32, 1)');
	    }
	};
	var bindActions = function () {
	    button.on('click', expand);
	    win.on('click', hide);
	};
	var init = function () {
	    bindActions();
	};
	init();
	</script>

Menu dọc ẩn hiện

DEMO:  http://codepen.io/Beohoavinh/full/egoJrE/

Chèn code dưới vào phần menu:

	<nav>
	  <ul>
	    <li>Home</li>
	    <li>About me</li>
	    <li>Blog</li>
	    <li>Contact</li>
	  </ul>
	</nav>
	<div class="openNav">
	  <div class="icon"></div>
	</div>

	<div class="wrapper">
	  <section>
	  <h1>Chia Sẻ 78</h1>
	  </section>
	</div>
	
	<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
	

Tiếp đến chèn css:

.navOpen {
overflow: hidden;
}
.wrapper {
transition-duration: 0.5s;
transition-timing-function: swing;
background-color: white;
width: 100%;
height: 100%;
position: relative;
padding: 100px 40px;
}
.wrapper.open {
transform: translateX(250px) translateY(50px);
-webkit-transform: translateX(250px) translateY(50px);
box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
}
.wrapper section {
max-width: 600px;
margin: 0 auto;
}
.wrapper section h1 {
font-weight: 300;
font-size: 30px;
margin-bottom: 10px;
}
.wrapper section h2 {
font-weight: 300;
font-size: 20px;
margin-bottom: 40px;
}
.wrapper section p {
margin-bottom: 40px;
}
.openNav {
transition-duration: 0.5s;
transition-timing-function: swing;
width: 50px;
height: 50px;
background-color: #14B9FF;
position: fixed;
top: 20px;
left: 20px;
z-index: 9;
}
.openNav:hover {
cursor: pointer;
}
.openNav .icon {
transition-duration: 0.2s;
position: absolute;
width: 30px;
height: 2px;
background-color: white;
top: 24px;
left: 10px;
}
.openNav .icon:before,
.openNav .icon:after {
transition-duration: 0.5s;
background-color: white;
position: absolute;
content: "";
width: 30px;
height: 2px;
left: 0px;
}
.openNav .icon:before {
top: -7px;
}
.openNav .icon:after {
top: 7px;
}
.openNav.open {
transform: translateX(250px) translateY(50px);
-webkit-transform: translateX(250px) translateY(50px);
}
.openNav.open .icon {
background-color: transparent;
}
.openNav.open .icon:before,
.openNav.open .icon:after {
top: 0;
}
.openNav.open .icon:before {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.openNav.open .icon:after {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
nav {
background-color: #14B9FF;
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
}
nav ul {
width: 250px;
margin-top: 50px;
}
nav ul:hover li {
color: rgba(255, 255, 255, 0.5);
}
nav ul li {
transition-duration: 0.25s;
display: block;
padding: 5px 40px;
color: white;
letter-spacing: 0.02em;
text-align: right;
}
nav ul li:hover {
cursor: pointer;
color: white;
}

Chèn JS cuối cùng là xong:

<script type="text/javascript">

$('.openNav').click(function () {
$('body').toggleClass('navOpen');
$('nav').toggleClass('open');
$('.wrapper').toggleClass('open');
$(this).toggleClass('open');
});
</script>