CSS HIỆU ỨNG THẦY TRÒ TÂY DU KÝ THỈNH KINH
Bài viết cùng chuyên mục
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
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>
Comments
Post a Comment