CSS3动画实现小熊奔跑

一、需要注意的

小熊、冰山和冰山黑影定位为绝对定位，有层级关系index。
冰山和冰山黑影必须水平方向重复repeat-x，否则会中断卡壳。

二、效果图

三、代码

<!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>* {padding: 0;margin: 0;}body {background-color: #ccc;}.bear {position: absolute;z-index: 2;width: 200px;height: 100px;background: url(img/bear.png) no-repeat;animation: bearRun 1s steps(8) infinite, bearMove 1s forwards;}.whiteHill {position: absolute;z-index: 1;bottom: 0;width: 100%;height: 336px;/* 必须水平方向重复，不然会中断 */background: url(img/bg1.png) repeat-x;animation: hillMove 30s linear infinite;}.blackHill {position: absolute;z-index: 0;bottom: 0;width: 100%;height: 569px;background: url(img/bg2.png) repeat-x;animation: hillMove 30s linear infinite;opacity: 0.7;}@keyframes bearRun {0% {background-position: 0 0;}100% {background-position: -1600px 0;}}@keyframes bearMove {0% {top: 80%;left: 0;}100% {top: 80%;left: 50%;transform: translateX(-50%);}}@keyframes hillMove {0% {background-position: 0 0;}100% {background-position: -3840px 0;}}</style></head><body><div class="bear"></div><div class="whiteHill"></div><div class="blackHill"></div>
</body></html>

四、项目所需图片

项目文件

CSS3动画实现小熊奔跑相关推荐

利用CSS3动画制作“百度浏览器”官网奔跑的北极熊
现在各大浏览器的官网是越做越炫酷了.比如百度浏览器官网,虽然我不用这个浏览器呢(只用原版Chrome,不为其他,只因国内换壳的浏览器内核版本太低,跟Chrome官方始终有差距).但是不得不佩服百度的设 ...
利用CSS3动画让图片动起来
利用CSS3动画让图片动起来原材料:一张png图片实现原理:利用了两个动画bear.move,bear动画让小熊奔跑起来,就是通过控制背景图片的位置让每张小熊图片依次闪过,从而看上去就像跑起来一样 ...
css3 动画+奔跑的熊案例
动画的使用 1.先定义动画 2.调用动画用keyframes定义动画 @keyframes 动画名称{ /* 开始状态 / 0%{ } / 结束状态 / 100%{ } } 调用动画 animati ...
5分钟教你利用css3动画实现奔跑的北极熊效果
实现原理:利用css3动画中的animation-timing-function的steps(),让一张有连续动作图片一段一段的在页面上显示出来,从而实现动画效果. 1.需要素材: 2.准备一个div ...
CSS入门八、CSS3动画
零.文章目录文章地址个人博客-CSDN地址:https://blog.csdn.net/liyou123456789 个人博客-GiteePages:https://bluecusliyou.gi ...
CSS3动画——steps函数
CSS3动画中应用的定时函数(timing function)常用的有内置关键字linear, ease, ease-in, ease-out, ease-in-out, step-start, st ...
html 语言 gif 动画,动效篇（1）－－从简单CSS3动画片段代码，到生成gif动图～
简单css动画片段代码(最终效果 ) (一)请自行下载安装Dreamweaver 在Dreamweaver编写代码(如需参考请复制下列代码) (二)HTML CSS代码详解css代码(/*详解*/) ...
css怎么动画中该透明度,通过css3动画和opacity透明度实现呼吸灯效果
本文介绍了通过css3动画和opacity透明度实现呼吸灯效果的方法,分享给大家,具体如下: 呼吸灯 /*也可以通过加层罩,通过设置层罩透明度来实现亮度动画*/ body{ background-co ...
小猿圈自学web前端之CSS3动画练习案例：用CSS3做个钟表
前段时间发的五子棋的游戏很多小伙伴都私聊让再做个,今天小猿圈web前端讲师为大家分享的是CSS3动画练习案例:用CSS3做个钟表,想玩的小伙伴记得自己运行一下呦. 自学CSS3属性之后,我们来用一个小 ...

CSS3动画实现小熊奔跑

目录

一、需要注意的

二、效果图

三、代码

四、项目所需图片

CSS3动画实现小熊奔跑相关推荐

最新文章

热门文章