纯css实现格斗之王人物跑步跑动动画效果
代码语言:html
所属分类:动画
代码描述:纯css实现格斗之王人物跑步跑动动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html, body { max-width: 100%; height: 100vh; overflow-x: hidden; margin: 0; padding: 0; background: linear-gradient(to bottom right, darkred, orange); } .sprite { background-image: url(http://repo.bfw.wiki/bfwrepo/image/5e9a4abd99f4d.png); background-repeat: no-repeat; display: block; width: 101px; height: 140px; animation-name: running; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: steps(1); zoom: 1.5; -moz-transform: scale(1.5); -moz-transform-origin: 151px 0; } .box { position: relative; top: 15px; animation-name: moving; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes moving { 0% { left: -101px; } 100% { le.........完整代码请登录后点击上方下载按钮下载查看
网友评论0