奔跑的熊大(案例)内附图片素材

此案例使用了 steps() 步长来显示熊的状态，常规的ease等动画速度，达不到我们需要的效果，因此steps()更契合，而两张背景使用linear来匀速运动来保证速度的一致。

具体代码如下：

<!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>奔跑的熊</title><style>.bear {position: absolute;bottom: 15px;width: 200px;height: 100px;background: url(media/bear.png) no-repeat;/* 元素可以添加多个动画，用逗号分割即可 */animation: bear 1s steps(8) infinite, move 3s linear forwards;}.bg2 {position: absolute;width: 100%;height: 500px;/* 注意这里不要写no-repeat 否则图片动画结束之后会有空白 */background: url(media/bg2.png);animation: bg-move 25s linear infinite;}.bg1 {position: absolute;bottom: 0;width: 100%;height: 336px;/* 注意这里不要写no-repeat 否则图片动画结束之后会有空白 */background: url(media/bg1.png);animation: bg-move 25s linear infinite;}/* 让熊动起来 */@keyframes bear {0% {background-position: 0 0;}100% {background-position: -1600px 0;}}/* 熊跑到中间 */@keyframes move {0% {left: 0;}100% {left: 50%;/* margin-left: -100px; *//* 往左移动自身宽度的一半 */transform: translateX(-50%);}}@keyframes bg-move {0% {background-position: 0 0;}100% {background-position: -3840px 0;}}</style></head><body><div class="bg2"><div class="bg1"><div class="bear"></div></div></div></body>
</html>

图片素材：

至于具体效果，感兴趣的朋友们可以去试一试，也可以在此基础上加入一些自己的小创意。

奔跑的熊大(案例)内附图片素材相关推荐

旋转木马（案例）附图片素材
图片素材是自己找的,此案例效果为:图片围绕3D中的Y轴进行旋转,鼠标移动至图片,停止动画,鼠标离开,继续动画. <!DOCTYPE html> <html lang="en ...
奔跑的熊大案例（CSS3动画）
跟着pink老师后面学习 <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...
CSS|奔跑的熊大案例（有图+代码）
让白色的熊大跑到屏幕中间熊: 山: 代码: <!DOCTYPE html> <html lang="en"><head><meta c ...
CTP接口开发案例（内附源码）
CTP接口开发(内附源码) 提示:在看本博客之前建议先阅读上期所官方的开发文档(SimNow官网中去下载CTP接口文件),然后在SimNow官网注册模拟账号. 提示:股票CTP接口和期货CTP接口类似 ...
计算机一级b证书图片p,只需两步，分分钟搞定证件照（内附福利）
原标题:只需两步,分分钟搞定证件照(内附福利) 简历中要不要放证件照? 当然要! 怎么样才能让证件照成为求职过程中的加分项? 不浮夸,不造作! 证件照怎么拍? 不要998,小V教你在家就能自制最美证件 ...
社群运营sop私域运营最全的一套流程（内附小白教程+营销案例）
内容纯分享,无套路,文内附<社群&私域运营社群运营必备教程>,没有比这份更全的了! 互联网,得流量者得天下.如果你想要拥有一席之地,那么社群.私域运营是你必须要学会的技能.或许你已 ...
python自动下载安装软件_30行Python代码从百度自动下载图片(内附源码和exe程序)...
只需要30行代码就可以从百度自动下载图片大家好,我是行哥,一个专门教小学生撸Python的编程老师(小学生都能学会的编程) 这里行哥想问大家三个问题 : - 你还在为批量下载表情包发愁吗? - 你还 ...
Python：PyQt5设计一个文本编辑器窗体程序（附UI窗体和图片素材下载）
hello,大家好,我是wangzirui32,今天我们来学习如何用PyQt5设计一个文本编辑器窗体,开始学习吧! 文章目录 1. UI窗体设计 2. 编写代码 2.1 pyuic生成代码 2.2 修 ...
（附源码）php图片素材网毕业设计110907
目录第1章前言 1 1.1 研究背景 1 1.2 研究现状 1 1.3 系统开发目标 2 第2章技术与原理 3 2.1 Thinkphp框架介绍: 3 2.2 B/S体系工作原理: 3 2. ...

奔跑的熊大(案例)内附图片素材

奔跑的熊大(案例)内附图片素材相关推荐

最新文章

热门文章