纯CSS3实现动画—奔跑的北极熊

代码如下：直接复制粘贴即可食用（注意背景图片路径）

<!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>
</head>
<style>h1 {height: 100px;line-height: 150px;text-align: center;}.wbear {position: absolute;width: 200px;height: 100px;bottom: 0px;background-image: url(./img/bear.png);/* 第一个动画为北极熊自身图片滚动（分为8步），第二个动画为北极熊整体的移动 */animation: bear .8s steps(8) infinite, bearmove 15s forwards;}@keyframes bear {0% {background-position: 0 0;}100% {background-position: -1600px 0;}}@keyframes bearmove {0% {left: 0;}100% {left: 50%;transform: translateX(-50%);}}.bg1 {position: relative;height: 400px;background-image: url(./img/bg2.png);animation: bgmove1 30s linear forwards;}.bg2 {position: absolute;width: 100%;height: 200px;left: 0px;bottom: 0px;background-image: url(./img/bg1.png);animation: bgmove2 30s linear forwards;}@keyframes bgmove1 {0% {background-position: 0 0;}100% {background-position: -400px 0;}}@keyframes bgmove2 {0% {background-position: 0 0;}100% {background-position: -1600px 0;}}
</style><body><h1>CSS3动画——奔跑的北极熊</h1><div class="bg1"><div class="bg2"><div class="wbear"></div></div></div>
</body></html>

背景图1：

背景图2：

白熊：

纯CSS3实现动画—奔跑的北极熊相关推荐

纯CSS3花朵动画js特效
下载地址纯CSS3花朵动画特效,3d立体效果的开花效果. dd:
css 边缘闪光_纯css3闪烁动画《发光的边框效果》
纯css3闪烁动画 /* 动画闪烁颜色 */ @-webkit-keyframes greenPulse { from { background-color: #749a02; -webkit-box ...
花哨的纯CSS3边框动画
下载地址花哨的纯CSS3边框动画 dd:
纸飞机html,Flyaway.css-炫酷纯CSS3纸飞机动画特效
Flyaway.css是一款使用纯CSS3制作的炫酷纸飞机动画特效.Flyout模式可以应用于登录页面,信息发送成功,如果填的信息有误,可以使用Shake模式,代表信息输入有误. Flyaway.cs ...
php人物行走,非常震撼的纯CSS3人物行走动画
今天分享给大家的是一个用纯CSS3实现的人物行走动画,在没有使用JavaScript的情况下,用CSS3技术将人物行走的姿态描绘得非常逼真.其实动画实现的原理也是比较简单的,将人物行走时的状态分割成多 ...
纯css3云彩动画效果
效果描述: 纯CSS3实现的云彩动画飘动效果非常逼真实用使用方法: 1.将body中的代码部分拷贝到你的页面中 2.引入对应的CSS文件即可转载于:https://www.cnblogs.com ...
超酷！纯CSS3烧烤动画实现教程
今天在老外的网站上看到一款很有创意的纯CSS3动画,是模拟烧烤活动的.款动画模拟了一个烧烤架,烧烤架上的食物也都是用纯CSS3绘制而成,没有用一张图片,效果相当逼真.另外一个有意思的是,这个CSS3烧 ...
纯css3天气动画场景特效
CSS3超强大,以下是纯用CSS3+HTML实现的场景效果图: 查看效果:http://hovertree.com/h/bjaf/cssrotate.htm css3 3d展示中rotate()介绍与 ...
纯css3饮料机动画代码
下载地址使用css3实现的接杯饮料的动画,饮料机和杯子都是css3代码实现的. dd:

纯CSS3实现动画—奔跑的北极熊

纯CSS3实现动画—奔跑的北极熊

纯CSS3实现动画—奔跑的北极熊相关推荐

最新文章

热门文章