动画的应用，西游记动画效果

实现背景向后移动以及人物走路的动画效果。

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>梦幻西游</title><style type="text/css">*{margin: 0;padding: 0;list-style: none;}html,body,.content{width: 100%;height: 100%;}.content{position: relative;width: 100%;overflow: hidden;}.bg{width: 3920px;height: 100%;background-image: url('https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/2.jpg');background-repeat: repeat-x;animation-name: bg;/* 引用的动画名称 */animation-duration: 30s;/* 动画持续时间/次 */animation-timing-function: linear;/*动画执行的时间曲线为线性,即匀速*/animation-iteration-count: infinite;/* 无限循环 */}.st{position: absolute;width: 950px;height: 180px;left: 50%;margin-left: -475px;bottom: 220px;}.st>ul{width: 950px;height: 180px;display: flex;}.st>ul>li{flex: 1;margin-right: 50px;overflow: hidden;}.st >ul >li >div{width: 1600px;height: 180px;font-size: 0;animation-name: st; /* 引用的动画名称 */animation-duration: 1s;/* 动画持续时间/次 */animation-iteration-count: infinite;/* 无限循环 */animation-timing-function: steps(8);/* 图长1600px，走8步，每次跨度为200px *//* 引用动画效果名为st的动画，1s内走八步，每部跨度为200px即为一张小图，打开浏览器将无限循环至关闭浏览器 */}.st >ul >li >div>img{width: 100%;}@keyframes st{  /*动画效果，从师徒图片的最左边到图片的最右边*/from{margin-left: 0;}to{margin-left: -1600px;}}@keyframes bg{/*动画效果，从背景图片的最右边到图片的最左边*/from{margin-left: -1920px;}to{margin-left: 0px;}}</style>
</head>
<body><div class="content"><!-- 背景 --><div class="bg"></div><!-- 师徒四人 --><div class="st"><ul><li><div><img src="https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/west_01_3ca39fe.png"></div></li><li><div><img src="https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/west_02_47bad19.png"></div></li><li><div><img src="https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/west_03_f962447.png"></div></li><li><div><img src="https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/west_04_6516d80.png"></div></li></ul></div></div>
</body>
</html>

动画的应用，西游记动画效果相关推荐

HTML动画部分——项目西游记动画
一. 项目需求一些 CSS 属性是可以有动画效果的,这意味着它们可以用于动画和过渡. 动画属性可以逐渐地从一个值变化到另一个值,比如尺寸大小.数量.百分比和颜色. 二.代码部分 <!DOCTY ...
Android开发--图形图像与动画（三）--Animation效果的XML实现
使用XML来定义Tween Animation 动画的XML文件在工程中res/anim目录,这个文件必须包含一个根元素,可以使<alpha><scale> <trans ...
CSS3圆圈动画放大缩小循环动画效果
代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
动画---图形图像与动画(三)Animation效果的XML实现
使用XML来定义Tween Animation 动画的XML文件在工程中res/anim目录,这个文件必须包含一个根元素,可以使<alpha><scale> <tran ...
android学习笔记---56_activity切换动画与页面切换动画,自定义activity窗口切换动画效果的实现.
2013/5/17 Java技术qq交流群:JavaDream:251572072 56_activity切换动画与页面切换动画 ----------------------------------- ...
jquery 动画总结（主要指效果函数）
动画无非两类:帧动画frame和变形动画tween,以及3d动画.不论web还是安卓苹果app,动画原理都是这些. web app 动画实现的途径,无非这几种: 1 gif动画---这就是帧动画,把若 ...
漂浮的云朵html,CSS3之动画模块实现云朵漂浮效果
动画模块-云层效果 * { margin:0; padding:0; } ul { height: 400px; background-color: skyblue; margin-top: 100p ...
CSS 波浪效果动画波浪起伏水波动画 Pure CSS Wave 手把手教你用CSS做出波浪动画
文章目录前言设计思路图例完整代码细节&问题 1. 双伪元素 2.CSS并集选择器 2.position 前言最近在学习前端知识,在做背景的时候想弄一个椭圆的弧形,想到以前网上看 ...
微信小程序学习：动画实现幻灯片播放照片效果
前言部分目前市面上小程序越来越多,微信,支付宝,头条都推出了自己的小程序,但是由于微信小程序是最开始的,小程序刚出的时候我也了解过,当时写了个demo也写了一个小的新闻客户端,当时觉得小程序还是有点 ...

动画的应用，西游记动画效果

动画的应用，西游记动画效果相关推荐

最新文章

热门文章