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>