CSS动画：梦幻西游

我在抖音[亿以网络]的第二节网课！

梦幻西游官网改了，素材没有了，搬运：css3仿梦幻西游场景动画特效

<html>
<head>
<title>梦幻西游</title>
<style>
body {background: url("bg.jpg");animation: bg 50s linear infinite;
}@keyframes bg {0% { background-position-x: 0px; }100% { background-position-x: 1920px; }
}.footer {width: 760px;height: 240px;margin: 300px auto;
}.role {float: left;width: 190px;height: 240px; background-repeat: no-repeat;background-position-y: center;
}.role1 {background-image: url("west_01.png");animation: role1 1.4s steps(8) infinite;
}@keyframes role1 {0% { background-position-x: 0px; }100% { background-position-x: -1600px; }
}.role2 {background-image: url("west_02.png");animation: role1 1.4s steps(8) infinite;
}@keyframes role2 {0% { background-position-x: 0px; }100% { background-position-x: -1600px; }
}.role3 {background-image: url("west_03.png");animation: role3 1.4s steps(8) infinite;
}@keyframes role3 {0% { background-position-x: 0px; }100% { background-position-x: -1360px; }
}.role4 {background-image: url("west_04.png");animation: role4 1.4s steps(8) infinite;
}@keyframes role4 {0% { background-position-x: 0px; }100% { background-position-x: -1680px; }
}
</style>
</head>
<body>
<div class="footer"><div class="role role1"></div><div class="role role2"></div><div class="role role3"></div><div class="role role4"></div>
</div>
</body>
</html>

CSS动画：梦幻西游相关推荐

CSS动画效果无限循环放大缩小
效果图: CSS动画效果无限循环放大缩小 <image class="anima" mode="widthFix" @click="nav&qu ...
【译】CSS动画 vs JS动画
原文地址目前有两个主流的方法在web上创建动画:使用CSS或JS.到底选择哪种方法来实现动画,完全取决于你的项目以及你想要达到的效果. tips: 对于简单的只出现一次的过渡效果,可以采用CSS动画 ...
Vue 中 CSS 动画原理
下面这段代码,是点击按钮实现hello world显示与隐藏 <div id="root"><div v-if="show">hello ...
前端技术周刊 2019-01-07：CSS 动画
2019-01-07 前端快爆 Chrome 72 已经进入了 beta 阶段.新增:公有类成员的声明和初始化.一些 DevTools 新功能(可视化性能指标.高亮 text nodes.复制节点的 ...
超棒的跨浏览器纯CSS动画实现 - Animate.css
为什么80%的码农都做不了架构师?>>> 日期:2012-8-12 来源:GBin1.com 在线演示本地下载通常情况下如果需要生成web动画效果的话,我们肯定会考虑使 ...
盒子端 CSS 动画性能提升研究
不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...
动画延迟效果css,每个子元素都有延迟的CSS动画
每个子元素都有延迟的CSS动画我试图通过将动画应用于每个子元素来创建级联效果. 我想知道是否有比这更好的方法: .myClass img:nth-child(1){ -webkit-animatio ...
原生js判断css动画结束 css 动画结束的回调函数
原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...
html和css制作动漫岛,CSS动画
transition 早期要实现动画效果,都是依赖于JavaScript或Flash来完成.但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化, ...
html5监听动画结束,js判断css动画是否完成 animation,transition
气死了,发现这些鸟人讲事情都讲一半,害死初学者. css动画有两种,animation,transition,所以分开来讲. 1.animation: css定义 #left1{} html定义: 安 ...

CSS动画：梦幻西游

CSS动画：梦幻西游相关推荐

最新文章

热门文章