赞
踩
- <body>
- <div class="box">
- <div class="wk"></div>
- <div class="bj"></div>
- <div class="ts"></div>
- <div class="ss"></div>
- </div>
- </body>
- * {
- margin: 0;
- padding: 0;
- }
-
- /* 背景 */
- body {
- width: 100%;
- height: 100%;
- background-image: url(./images/bg.jpg);
- /* 背景绑定名称,动画无限次往返执行,动画反向执行因为背景向后走,动画匀速运动 */
- animation: bg 20s infinite reverse linear;
- }
-
- .box {
- width: 800px;
- height: 500px;
- display: flex;
- justify-content: space-between;
- align-items: flex-end;
- margin: 0px auto;
-
- }
-
- .wk {
- width: 180px;
- height: 180px;
- background-image: url(./images/1.png);
- /* 悟空绑定名称,动画持续时间,分8步执行动画,动画无限次往返执行 */
- animation: wk 2s steps(8) infinite;
-
- }
-
- .bj {
- width: 180px;
- height: 180px;
- background-image: url(./images/2.png);
- /* 八戒绑定名称,动画持续时间,分8步执行动画,动画无限次往返执行 */
- animation: bj 2s steps(8) infinite;
-
- }
-
- .ts {
- width: 190px;
- height: 240px;
- background-image: url(./images/3.png);
- /* 唐僧绑定名称,动画持续时间,分8步执行动画,动画无限次往返执行 */
- animation: ts 2s steps(8) infinite;
-
- }
-
- .ss {
- width: 200px;
- height: 200px;
- background-image: url(./images/4.png);
- /* 沙僧绑定名称,动画持续时间,分8步执行动画,动画无限次往返执行 */
- animation: ss 2s steps(8) infinite;
-
- }
-
- @keyframes bg {
- 0% {
- background-position: 0 0;
- }
-
- 100% {
- background-position: -1600px 0;
- }
-
- }
-
- @keyframes wk {
- 0% {
- background-position: 0 center;
- }
-
- 100% {
- background-position: -1600px center;
- }
- }
-
- @keyframes bj {
- 0% {
- background-position: 0 center;
- }
-
- 100% {
- background-position: -1600px center;
- }
-
-
- }
-
- @keyframes ts {
- 0% {
- background-position: 0 center;
- }
-
- 100% {
- background-position: -1360px center;
- }
-
- }
-
- @keyframes ss {
- 0% {
- background-position: 0 center;
- }
-
- 100% {
- background-position: -1680px center;
- }
-
- }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。