<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>奔跑的小熊</title> <style> body{ overflow: hidden; background-color: #ccc; } div.bearSelf{ position: absolute; bottom: 100px; width: 200px; height: 100px; background: url(media/bear.png) no-repeat; /* 调用bear和move动画 */ animation: bear 1s steps(8) infinite, move 3s forwards; /* 背景图片是设计好的8个,水平排布好的,定格动画 */ /* 用8步(1200/200)完成了1600px宽度背景图片,在200px宽度的相框盒子里,的水平移动,达成视觉电视效果(例如翻页漫画)*/ /* steps(n) 步长,表示分n步完成一段动画 */ } /* 熊本身定格动画 */ @keyframes bear{ 0% { background-position: 0 0; } 100%{ background-position: -1600px 0; } } /* 整***置移动 */ @keyframes move{ 0% { left: 0; } 100%{ left: 50%; /* margin-left: -100px; */ transform: translateX(-50%); } } /* 天空 */ .sky{ width: 25600px; height: 800px; background: url(media/bg3.png) no-repeat; } /* 山的缓动 */ .mounF{ position: absolute; width: 3840px; height: 336px; bottom: 0; background: url(media/bg1.png) no-repeat; animation: moun 60s infinite linear; animation-delay: 1.6s; } .mounB{ position: absolute; width: 3840px; height: 569px; top: 200px; background: url(media/bg2.png) no-repeat; animation: moun 120s infinite linear; animation-delay: 1.6s; } @keyframes moun{ 0% { background-position: 0 0; } 100%{ background-position: -1600px 0; } } </style> </head> <body> <!-- 天空 --> <div class="sky"></div> <!-- 后面的山 --> <div class="mounB"> </div> <!-- 前山 --> <div class="mounF"> </div> <!-- 动画相框 --> <div class="bearSelf"> </div> </body> </html>