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 




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/AVvXsEjdrYD4B_aNdZOFtpmmZId0QUfuFX4f2eygPk0ERP7YdUYWMNxo2dezX4wTWgBQxNXKyg62BnVq1kWu01LVv_qdbrstqezRRdsAYjzKbnqAfJ_JApGUFDIM-D2Qwz-W3V-I-ojgPa7ahbs/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/AVvXsEjXY7ZXeVCwU2WZijp79SPhjSUYqpg2EuMqDRYlaaNKxIjU5g1_kZYN8fgxIZcxl6jCmxZUWGL5tAZlSNA64UII_YSku3Ioa7KoYYhD9R-5FgagNhRDTLnneCQqVZ5UKNYUiBatLTScIXk/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/AVvXsEglxMgnpHYOOZKivWsvzpfTTFV1B4mKiRv8Wj9yVG94Sm_vgQwBuFmY7eQmADROn1ZsDxtMbUxI8SYc3cpNH9h9Z74HaDo5RycI-if8AMIP2s2DcFfib-TJS29nlqhJZ3dEFDvtXGGhVUI/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/AVvXsEih1Pe18dz28fzIh2bpTPH0yyqrcbJ2eowvfcSTBAxJPmscg2LTzo5UPP-9jaBU2kJvLtP8_Ey8fXzR1ayB_rQCkRb4wlC3yHm6GvnBrFgMpczlZ_CEGYluK0l5SlsSiz-FaCjLMV-gO3M/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/AVvXsEgrOc05Nd6xbohaCmMZRcZMrKma3fjJAlzb0SNG543UHaUXaZC9XFpE85rsd7WFuSn8cQyTyHF-T3E-Z_HpHemqYXKjTIFHHMRhGdEpn5ukJTAXVT592Zo6J9Z3PzVviSwyZG2Qg01ojT4/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>

DMCA.com Protection Status

Blog mình đã bỏ hệ thống bình luận Blogspot và thay thế bằng bình luận Facebook từ ngày 11/07/2018 nên hơn 3k bình luận trước đó sẽ không còn hiển thị nữa. Nếu bạn không nhận được phản hồi về thắc mắc của bạn trong mỗi bài viết thì liên hệ trực tiếp với mình qua PCB Fanpage.