Hiệu ứng Tây Du Ký-Thầy trò Đường Tăng đi thỉnh kinh

Chuyến hành trình của 4 thầy trò Đường Tăng sang Tây Trúc thỉnh kinh là một chuyến đi trải qua nhiều thử thách để có thể tìm đến chân kinh.

Hành trình gian nan đầy thú vị này đã được văn học cũng như phim ảnh ghi chép lại khá hấp dẫn và đầy đủ.

Cuộc hành trình đi lấy kinh của 4 thầy trò Đường Tam Tạng bạn cũng có thể tái hiện lại trên blogspot với việc sử dụng css và HTML.

Dưới đây là cách tạo hiệu ứng Thầy trò Đường Tăng đi Tây Trúc thỉnh kinh

Demo xem tại:
DEMO
Thêm css

* {
  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/AVvXsEjRm8ZTMjc6eLIDKVjrZ8-wpvyg5PK8b_hmJ4EcX7oaPzRymxITi7jtpxsxHnm7v2iwpEj8oOfFp7_ZvvmTlAAQjb8mlMpSddRqYXptetd5dNouryeTX0YZT6PB5DbWrUER_CGK6ArcCkc/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/AVvXsEitjexgQFHDykrDzvKlclSp8hxTdClAJJMeNxrZyNoUypWQhpDdNmhWpreJcg5kJFXAUz1LZrsT7AkRNPQqVNXQ8dt8wUF2MziM3X_AcGbxOD7U_l5DktlWyEZdwqzn_LF1GpFA3g_uv-0/s1600/3.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/AVvXsEgipTFY6KNWxBVzFCDsTl4gIp3N6_sCsM2mpB39b0ImhfuhqpmZ4ixC-VUa7AoLjeDjYzynnzPxTE_f05N8r1k2Cpi_I15naqyG7v9X4MUVvFbd7fRXQ00BnjscHheQRFo6tkolI6G1wIs/s1600/4.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/AVvXsEiW7t8zpt3WhXiywHQnFp2RCM_euXn4AbJsQBRNAwUuqfggvVTIkpKXsziactzWE8Yy6agWGxCuRyVj3szXHMYJUEvmpL7_FlV3v1geo8I9qcKKSjc5Ahk1jSwFqvfuHCeWM7g4TMdQB5A/s1600/5.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/AVvXsEjDL3lRlyZxkUFAbygACr1aOfM3qKZl8Nf27DaM2cS56x832YY2RERdy5n5gXaliyhdBCMutMMXsA1t2eU3bhPOntrrN48HgptyVSLuGjNVlp7740igmodb5AXbjvHekMFXNpoZzVA4zXI/s3200/6.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;
  }
 }
@media screen and (max-width:640px){.main{max-width:100% !important}}

Thêm HTML

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

Code là thế nhưng để nó hiển thị tại vị trí cụ thể như ý muốn thì cần chỉnh width,height,top,left...cho phù hợp.
Nguồn: BLOG CHIA SẺ 78 (PHÚ YÊN)(chiase78.blogspot.com)