梦幻西游动画效果展示

展示如下图动画效果：

实现代码如下：

<!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{position: relative;width: 3920px;height: 100%;background-image: url('./img/bg.jpg');background-repeat: repeat-x;animation-name: bg;/* 引用的动画名称 */animation-duration: 46s;/* 动画持续时间/次 */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{left: -1920px;}to{left: 0px;}}</style>
</head>
<body><div class="content"><!-- 背景 --><div class="bg"></div><!-- 师徒四人 --><div class="st"><ul><li><div><img src="./img/wk.png"></div></li><li><div><img src="./img/bj.png"></div></li><li><div><img src="./img/ts.png"></div></li><li><div><img src="./img/ss.png"></div></li></ul></div></div>
</body>
</html>

转载于:https://www.cnblogs.com/lidyfamily/p/11317370.html

梦幻西游动画效果展示相关推荐

Vue+wow.js+animate.css-实现页面滚动可视区域动画效果展示-案例
说明 wowjs-当页面向下滚动时,动画出现:当页面向上回滚时,动画不会回退. 安装 npm install wowjs --save-dev npm install animate.css --sa ...
unity_DoTween Ease 动画效果展示
源码父物体挂 GridLayoutGroup 组件. using System; using System.Collections; using System.Collections.Generic ...
html选中列表整列变色,excel选中行变色完整代码和动画效果
内容提要:文章介绍excel选中行变色的效果以及实现选中行变色的VBA代码. 在excel中如果行数过多,经常核对数据的准确性,容易错行跳行,所以才有本文的小技巧:excel选中行变色. 当我们在ex ...
CSS学习笔记——动画进阶(八音盒动画效果)
八音盒动画制作: 通过学到了CSS3动画以后,发现通过动画也是可以制作八音盒,话不多说,走起! Demo代码: HTML片段 <body><section><div> ...
javascript写字技巧_js canvas实现写字动画效果
本文实例为大家分享了js canvas实现写字动画效果展示的具体代码,供大家参考,具体内容如下页面html: 学写一个字 content=" height = device-height, ...
【前端】使用wow.js这个插件（实现页面动画效果），提高前端开发效率。
1.简介有的页面在向下滚动的时候,有些元素会产生细小的动画效果.比如需要做到滚动条滑到某个位置时,才能显示动画. wow.js 依赖 animate.css,所以它支持 animate.css 多达 ...
分享111个JS特效动画效果，总有一款适合您
分享111个JS特效动画效果,总有一款适合您 111个JS特效动画效果下载链接:https://pan.baidu.com/s/1s8mWkRlIZML2t5v1g1rlDA?pwd=pe5p 提取 ...
FCPX插件：15种棱镜折射图文展示介绍动画效果 Prism Slideshow
Prism Slideshow是一个非常强大且易于使用的fcpx图文展示介绍动画效果插件.包含15种棱镜折射图文展示介绍动画效果, 只需拖放即可创建动态和优雅的幻灯片.这些动画遵循了当今最流行.最引人 ...
php 3d animation,CSS_纯CSS实现菜单、导航栏的3D翻转动画效果，我曾经向大家展示过闪光的logo - phpStudy...
纯CSS实现菜单.导航栏的3D翻转动画效果我曾经向大家展示过闪光的logo,燃烧的火狐狸,多重嵌套动画等例子,今天,我们将要制作一个简单但非常酷的3D翻转菜单.大家可以先看看实际效果,下面有效果截图 ...
Qt5学习模仿qq音乐播放器样式（2）——点击动画效果+歌词颜色变换展示
拖的太久,主要再上一篇文章中,新学习了相关知识,做了右键菜单,点击按钮动画切换窗口和播放时歌词颜色显示当前播放位置. 主要为了实现功能的展示,所以很多文件读取都直接采用了本地文件这种比较low的方式. ...

梦幻西游动画效果展示

梦幻西游动画效果展示相关推荐

最新文章

热门文章