css实现西游记师徒四人取经行走途中动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现西游记师徒四人取经行走途中动画效果代码
代码标签: css 西游记 师徒 四人 取经 行走 途中 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> * { 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(//repo.bfw.wiki/bfwrepo/images/xiyou/2.jpg); float:left; margin-left:-2000px; } .wk { z-index:999; width:200px; height:180px; background:url(//repo.bfw.wiki/bfwrepo/images/xiyou/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(//repo.bfw.wiki/bfwrepo/images/xiyou/west_02_47bad19.png) 0 0 no-repeat; /*margin:400px auto; */ position:absolut.........完整代码请登录后点击上方下载按钮下载查看
网友评论0