CSS HIỆU ỨNG THẦY TRÒ TÂY DU KÝ THỈNH KINH Bác sĩ windows

CSS HIỆU ỨNG THẦY TRÒ TÂY DU KÝ THỈNH KINH

đã xuất bản August 26, 2018

Hôm nay rảnh rỗi lượt qua blog của https://chiase78.blogspot.com thì thấy 1 đoạn
CSS khá đẹp nên xin chia sẽ về cho anh em

DEMO

Thêm đoạn css dưới đây và thẻ]]></b:skin>

* {
  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/AVvXsEi9i4-kI76ENcZwZ-yylrav7JCEj3D6vQHauc2RH3SdjLNDcD_wAusmP3li4OOwYfFesOVB8GdbLzJH2fGYWftFHzYLw24A9on-6IgK4gkzQ-WhM6sxANuF9agOxU05R4QWYnf-rSAt8pI/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/AVvXsEikK7IliBJZB3pYdLJgM-s7f5aw5GQ_IRy75ZcbiYmnZGjpSOBZ8fDZuV2YsBvP757YRsm6BVW4ciMQqwMZC6nUcX2jz9Rze9R46HIn1grfOJzER_hm9lTtspMTFminjqcW-7rSDvYZsNQ/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/AVvXsEhjoXMiI1_XH9hBeIvRYt6fjMbAj2dkldSHhE-uBGVdwlJHM34eq0jLuswNWqw2p7C64-XA_CysqO_oWGmQuVYZtgekYYtqLfASi_4h0P68UhciNBajFRNpLxEjJhBuAEk8IX6SKjrctHw/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/AVvXsEgMisyjK-9D-oDT55ob16YMM7mCjtNJ0cty0FClFADLQafuXwq8BnF6nBrb2cWYhW1yKuEc5AIeS7y0hi0WsT0VGRLX9b2R1Y99e44oFXWH5D0oxCfZy-9ThWjURyK-uS3Jn1tvCpCzrmc/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/AVvXsEiHstS0uyjhK_TXjn-cZsB4gyl5SvVYgvejOhnapuwR49bTRB_fD9j2PwydwzvFgyhqiagYV-pZVj7k65ite9NFurutr32sW47wBSJ1R5HVdr4v9YiVqi1zxbBPNeV6AEBghCLn9up8Tj0/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>