百度官网小熊奔跑案例

演示效果:

难点：

熊从页面左方跑到中间和背景山移动的距离
熊在一直跑步过程中的步伐的持续

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=, initial-scale=1.0"><title>Document</title><style>body {background-color: #dfdfdd;}.father{position: relative;width: 100%;height: 330px;background: url(./bg-mountain-1.png) no-repeat;animation: backrun 15s linear infinite;margin-top: 580px;/* 背景图的动画 */}.one {position: absolute;bottom: 30px;width: 200px;height: 100px;background: url(./bear\ \(1\).png) no-repeat;animation: run 1s steps(8) infinite, runpos 3s linear forwards;/* 熊跑完的动画和自身做动作的动画 *//* step就是步频 在1s种之内分为8步做完熊跑步psd图 */}@keyframes run {0% {background-position: 0 0;}100% {/* 熊整个psd图跑完的距离 */background-position: -1600px 0;}}@keyframes runpos {0% {left: 0;}100% {   /* 跑到页面正中间 */left: 50%;transform: translatex(-50%);}}@keyframes backrun {0% {background-position: 0 0;}100% {background-position: 100% 0;}}</style>
</head><body><div class="father"><div class="one"></div></div>
</body></html>

素材：

百度官网小熊奔跑案例相关推荐

搜索引擎排名都选乐云seo_百度官网排名-搜索引擎算法优化
本文由乐云SEO提供,重点介绍了百度官网排名-搜索引擎算法优化相关内容.乐云SEO专业提供推广品牌的词,品牌推广的否定词,品牌推广达人奖颁奖词等多项产品服务.秉承着真诚.专业.责任.科学的宗旨,在行业 ...
百度官网认证多少钱? 百度官网认证作用和价值
百度官网认证可以免费吗?其实有一部分单位是可以免费的,主要是非营利性组织和五百强企业.如政府事业单位.机关企事业单位.世界五百强名单公司.风景区等地区都可以进行免费认证,也就是说一般企业通过百度官网认 ...
小马识途营销顾问解读百度官网认证的价值和意义
近来,有不少小伙伴咨询百度官网认证,一起探讨了百度官网认证的价值,以及标准版和高级版的区别等.小马识途营销顾问总结官网认证算是一种锦上添花,而能够低成本引流拓客的SEO才是雪中送炭. 百度官网认证是什 ...
免费的百度官网认证怎么搞？什么单位官网认证免费？
百度官网认证可以免费吗?其实有一部分单位是可以免费的,主要是非营利性组织和五百强企业.如政府事业单位.机关企事业单位.世界五百强名单公司.风景区等地区都可以进行免费认证,也就是说一般企业通过百度官网认 ...
建筑材料行业 | 官网数字化升级案例分析合集
一.LTD助力建材企业应对数智化转型建筑材料行业是中国经济转型的重要行业,云计算.大数据.物联网.人工智能等多项革新技术的兴起,正推动着建材行业向数字化和智能化的转型. 对于企业而言,数据化转型的根 ...
WinForm实现Rabbitmq官网6个案例-Topics
代码: namespace RabbitMQDemo {public partial class Topics : Form{private string exchangeName = "t ...
WinForm实现Rabbitmq官网6个案例-Publishe/Subscribe
代码: namespace RabbitMQDemo {public partial class PublishSubscribe : Form{private string exchangeName ...
建站案例 | 巧用科技蓝，打造有个性、高颜值的企业官网
很多企业在搭建企业网站的时候,经常会烦恼该如何设计,才能让官网看起来显得高大上. 为了实现"高大上",企业可谓是费尽心思,参考借鉴了大量不同风格的网站,看着是博采众长,可最后呈现的 ...
ios 百度ocr_Android与iOS原生百度文字识别（OCR）插件，可以使用官网API参数
更新记录 1.0.0(2020-11-09) 初始版本特点统一的返回结构 Android 与 IOS 乃至服务端使用API的返回体是一致的可以按官方文档设置参数,来实现差异需求比如,想要返回的识 ...

百度官网小熊奔跑案例

百度官网小熊奔跑案例相关推荐

最新文章

热门文章