奔跑的熊大动画效果JS

利用动画去尝试制作相应的动画效果
熊的制作思路在于：图片添加了动画效果，在时间范围内渐动改变，关键帧一直在改变，图片被往前拉熊展现奔跑的效果
熊奔跑的制作思路：基础效果盒子移动到水平居中的位置,瞬间视觉欺骗达到预期效果
背面大山制作：一个盒子水平布满，利用动画去改变background-position的位置，设置一个循环播放让后面持续动起来

<!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>body{background-color:white;}*{padding: 0;margin: 0;}div{float: left;display: inline-block;}.bear{position: absolute;top: 430px;width: 200px;height: 100px;background-color: pink;background: url(../images/bear.png);animation:b .4s steps(8) infinite,w 3s  forwards;}@keyframes w{0%{left: 0px;}100%{left: 50%;transform: translateX(-50%);}}@keyframes b{0%{background-position: 0 0;}100%{background-position:-1600px 0;}}.mountain1{position: absolute;top: 187px;width: 1272px;height: 336px;background:url(../images/bg1.png);animation:t 10s steps(384) infinite;}@keyframes t{0%{background-position: 0 0;}100%{background-position: -3840px 0;}}.mountain2{position: absolute;left: 0;width: 1272px;height: 569px;background-color: skyblue;background:url(../images/bg2.png);animation:t2 10s steps(384) infinite;}@keyframes t2{0%{background-position: 0 0;}100%{background-position: -3840px 0;}}</style>
</head>
<body><div class="mountain2"></div><div class="mountain1"></div><div class="bear"></div></body>
</html>

奔跑的熊大动画效果JS相关推荐

右上角鼠标滑过展开收缩动画效果js代码的演示页面
http://files.cnblogs.com/files/tanlingdangan/top_right.rar.gz 右上角鼠标滑过展开收缩动画效果js代码的演示页面http://www.51x ...
html翻牌动画效果,js+css3翻牌动画效果
这是一款js+css3翻牌动画效果,界面设计感不错的,喜欢可以下载哦温馨提示不兼容IE6,7,8浏览器. 查看演示下载资源: 16 次下载资源下载积分: 20 积分 function () { ...
android+百叶窗动画效果,js实现横向百叶窗效果网页切换动画效果的方法
本文实例讲述了js实现横向百叶窗效果网页切换动画效果的方法.分享给大家供大家参考.具体分析如下: 这是一款很简洁但是效果却不错的网页切换效果,点击新网页后,网页会出现蓝白相间的百叶窗线条自动切换,直到 ...
js实现3d标签云tag动画效果js特效代码
下载地址JS制作TAG标签云文字动画特效是一款当鼠标悬停某个标签时,当前标签静止,移出恢复滚动效果.tagcloud({ selector: ".tagcloud", //元素选择 ...
分享111个JS特效动画效果，总有一款适合您
分享111个JS特效动画效果,总有一款适合您 111个JS特效动画效果下载链接:https://pan.baidu.com/s/1s8mWkRlIZML2t5v1g1rlDA?pwd=pe5p 提取 ...
php3D动画,html5的canvas实现几何模型3D运动动画效果
html5的canvas实现几何模型3D运动动画效果 JS片段: var {atan2,sqrt,sin,cos,PI,acos} = Math; function project3D(x,y,z,v ...
动画实例 —— 奔跑的熊大
emmmmmm,这是今天的第一个案例. 这个案例,有一个亮点,巧用steps()实现动画. steps()是animation-timing-function属性的属性值,意思是分为几步完成动画的.在 ...
【Three.js】手把手教你在三维场景中实现人物行走动画效果
three.js的官方例程里面有个人物行走的案例,链接如下: three.js官方案例-人物行走这里简单剖析下人物行走的原理: (1) 首先需要有个动画素材.gltf是可以集成动画的,像行人行走的动 ...
vue如何使用原生js写动画效果_手摸手，带你用 vue 动画实现原生 app 切换效果，丝滑般的体验...
先来看效果图完整源码在 github 中欢迎 star: 准备开始之前您需要有 vue 基础,以及安装好 vue-cli 开始新建 vue 项目:vue init webpack vuexle ...

奔跑的熊大动画效果JS

奔跑的熊大动画效果JS相关推荐

最新文章

热门文章