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

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

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

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 
35 Comment 13:42
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://3.bp.blogspot.com/-BnxY-vUVNh0/W0IUOKmRfNI/AAAAAAAAB5U/StJqZg2Sf0QHF4YYVmgQIVGljFngVVyZQCLcBGAs/s1600/2.jpg);
  float: left;
  margin-left: -2000px;
 }
 .wk {
  z-index: 999;
  width: 200px;
  height: 180px;
  background: url(https://4.bp.blogspot.com/-MA3-MbowsV0/W0IUOZGnNtI/AAAAAAAAB5c/jPDCp9En5acgz6RxrN7IKV_SwZTt0RcwACLcBGAs/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://4.bp.blogspot.com/-qE0WLZXGiT0/W0IUOVmt8kI/AAAAAAAAB5Y/xSKEKhf3DFsN5ULaF6-m3r9_ibT_O9k9ACLcBGAs/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://4.bp.blogspot.com/-8Mpf1w1hOYA/W0IUOlkT6PI/AAAAAAAAB5g/NoczSASgOBIbIR__w38a2Ch_TfDsAmHMwCLcBGAs/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://2.bp.blogspot.com/-MXtptJ7dpJU/W0IVNbSy5yI/AAAAAAAAB50/RCIJE1ubQkYzmGiBCaxJu_0bcgirXz3fwCLcBGAs/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>
CSS Hiệu Ứng Thầy Trò Tây Du Ký Thỉnh Kinh CSS Hiệu Ứng Thầy Trò Tây Du Ký Thỉnh KinhHưng Star - IT8.8stars based on9reviews 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 
  • Kí tự đặc biệt
  • Tôi Share
  • Star Mạnh Blog
  • Văn Tuấn Blog
  • Tuổi Trẻ IT
  • Văn Thắng Blog
  • Duy Blogs
  • Star Sinh Blog
  • Lê Bá Long IT
  • Đặt liên kết
  • Đặt liên kết
  • Đặt liên kết