html+css中的animation 动画(二)孙悟空巡山

打开页面孙悟空在原地匀速运动,背景利用视觉差匀速的向后运动

附代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
<style>*{margin: 0;padding: 0;}.bg{height:100vh;width: 100%;background-image: url(./img/background.jpg);overflow: hidden;animation: bg 30s linear infinite;}.wk{position: absolute;left: 50%;bottom: 25%;height: 180px;width: 200px;background-image: url(./img/present.png);background-repeat: no-repeat;animation: move 2s steps(8) infinite;}@keyframes move {0%{background-position: 0,0;}100%{background-position: -1600px,0;}}@keyframes bg {0%{background-position:-1920px,0 ;}100%{background-position: 0,0;}}
</style>
</head>
<body><div class="bg"></div><div class="wk"></div>
</body>
</html>

素材

html+css中的animation 动画(二)孙悟空巡山相关推荐

android中设置Animation 动画效果
在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...
html选择器并列,CSS 中的选择器（二）- 组合选择器
CSS中组合选择器,算是基础选择器的升级版, 也就是组合去使用基础选择器的意思,因为配合一些 CSS 的专有语法,所以初学者比较难看懂, 下面枚举几个常用的选择器作为例子,略谈一下CSS的组合选择器的 ...
在GridView的行绑定中应用Animation动画效果
今天做一个功能需要实现绑定GridView的行Button点击就实现Animation的动画效果,终于被我解决了!主要代码如下: GridVIew行绑定: <ItemTemplate> ...
web 移动端 ios 浏览器中 animation 动画异常
关键字:animation,ios,移动端,异常解决问题的办法:页面dom加载完毕时延时给dom加上动画类名.即在vue的mounted钩子中用定时器延时100ms左右给需要动画的dom加上类名. ...
HTML中对于 animation（动画）属性的使用方法
本人最近开始写爱奇艺项目时,项目要求我对一个下拉列表写一个动画弹出效果,由于不经常写前端,所以我又重新去学习了CSS3中的 animation属性,我相信肯定有很多人在后面学习前端的时候也会用到这个属 ...
android编程xml动画,Android中xml设置Animation动画效果详解
在Android中,Animation动画效果的实现可以通过两种方式进行实现,一种是tweened animation渐变动画,另一种是frame by frame animation画面转换动画. ...
css中变形,css3中变形处理
transfrom功能在css3 中可以使用transfrom功能实现文字或图像的旋转,缩放,倾斜,移动等变形处理 deg是css3中使用的一种角度单位. 旋转: 使用rotate方法,在参数中加入 ...
ae制h5文字动画_H5案例分享：CSS3 Animation动画
CSS3 Animation动画一.@keyframes CSS3中的Animation动画主要的组件是@keyframes,@keyframes这个规则是用来创建动画的.将@keyframes当作 ...
css动画定义,CSS3中Animation动画的定义和调用
现在经常会看到一些门户网站的专题使用到CSS3的动画,咋也不能落伍,在此这梳理下动画知识吧,便于后面用到.接下来介绍下Animation动画的定义和调用,在介绍Animation之前需要了解下Keyf ...

html+css中的animation 动画(二)孙悟空巡山

html+css中的animation 动画(二)孙悟空巡山相关推荐

最新文章

热门文章