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;
}