奔跑的小熊案例（含图）

图一是雪山图，图二是小熊图，注意在没放雪山的背景前要加点背景颜色才能看得到小熊。

代码部分

<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 {position: relative;/* background-color: #333; */}div {height: 569px;background: url(bg2.png);animation: bg 20s linear infinite;}.bear {position: absolute;top: 400px;width: 200px;height: 100px;background: url(bear.png) no-repeat;/* 元素可以添加多个动画，用逗号分开 */animation: bear 1s steps(8) infinite, move 3s linear forwards;}@keyframes bg {0% {background-position: 0 0;}100% {background-position: -3640px 0;}}@keyframes bear {0% {background-position: 0 0;}100% {background-position: -1600px 0;}}@keyframes move {0% {left: 0;}100% {left: 50%;/* 计算麻烦 *//* margin-left: -100px; */transform: translate(-50%);}}</style>
</head><body><div><div class="bear"></div></div>
</body>

奔跑的小熊案例（含图）相关推荐

CSS动画奔跑的小熊案例
CSS动画奔跑的小熊案例资源个人学习代码 <!DOCTYPE html> <html lang="zh-CN"><head><meta ...
【CSS动画实现奔跑的小熊】
奔跑的小熊案例原百度浏览器下载页面效果 ,其实是通过动画 ,让小熊看起来像在奔跑一样原理很简单,图片如下: 这个图片是一张高100px 宽1600px 的图片,里面有八个部分的小熊形态,所以我们可 ...
css3 动画+奔跑的熊案例
动画的使用 1.先定义动画 2.调用动画用keyframes定义动画 @keyframes 动画名称{ /* 开始状态 / 0%{ } / 结束状态 / 100%{ } } 调用动画 animati ...
CSS学习笔记——动画animation初体验(小熊案例)
文章目录一.动画概念二.动画基本用法 1.动画模板 2.动画的使用 3.小熊案例总结一.动画概念动画是CSS3的一个重要用法,动画使元素逐渐从一种样式变为另一种样式.您可以随意更改任意数量的 ...
VMware vSphere 虚拟化实施手册及故障案例 | 多图
VMware vSphere 虚拟化实施手册及故障案例 | 多图 https://mp.weixin.qq.com/s?__biz=MjM5NTk0MTM1Mw==&mid=265063478 ...
计算机楼综合布线设计图,宿舍楼综合布线设计含图.doc
宿舍楼综合布线设计含图信息工程学院-网络规划与综合布线 PAGE 第 PAGE 10 页共10页目录 HYPERLINK \l _Toc5475 摘要1 HYPERLINK \l _Toc27 ...
百度浏览器奔跑的小熊
原百度浏览器,奔跑的小熊通过动画的方式,让图片看起来像是在奔跑一样原理其实很简单------ 图片的大小是1600px,一共就8个小熊,分成8个部分,让这八个部分在一定时间内从头到尾显示一遍,就形 ...
现代家庭的综合布线系统DIY案例（图）
现代家庭的综合布线系统DIY案例(图) (图片较大,请拉动滚动条观看)
HTML+CSS如何实现奔跑的小熊的动画？
HTML+ CSS如何实现奔跑的小熊的动画 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

奔跑的小熊案例（含图）

奔跑的小熊案例（含图）相关推荐

最新文章

热门文章