animation动画：奔跑的北极熊

奔跑的北极熊

效果图
（模仿以前百度浏览器背景制作）

实现代码
html部分

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/index.css">
</head><body><div class="animation_div"><div class="bear"></div><div class="snowbery"></div><div class="mountain"></div></div>
</body></html>

css部分

* {margin: 0;padding: 0;
}body {background-color: #CCC;
}.animation_div {position: fixed;bottom: 0;width: 100%;
}@keyframes bear {0% {}100% {background-position: -1600px 0;}
}@keyframes move_center {0% {}100% {left: 50%;transform: translateX(-50%);}
}.bear {position: absolute;bottom: 0;z-index: 3;left: 0;margin-bottom: 15px;height: 100px;width: 200px;background: url(../imgs/bear.png) no-repeat;animation: bear .8s steps(8) 0s infinite, move_center 4s ease-out 0s forwards;
}@keyframes snowbery {0% {}100% {background-position: -3840px 0;}
}.snowbery {position: absolute;bottom: 0;z-index: 2;width: 100%;height: 336px;background: url(../imgs/snowbery.png) repeat-x;animation: snowbery 10s linear 0s infinite;
}@keyframes mountain {0% {}100% {background-position: -3840px 0;}
}.mountain {position: absolute;bottom: 0;z-index: 1;width: 100%;height: 569px;background: url(../imgs/mountain.png) repeat-x;animation: mountain 10s linear 0s infinite;
}

animation动画：奔跑的北极熊相关推荐

纯CSS3实现动画—奔跑的北极熊
纯CSS3实现动画-奔跑的北极熊代码如下:直接复制粘贴即可食用(注意背景图片路径) <!DOCTYPE html> <html lang="en">< ...
奔跑的北极熊特效实现——动画animation练习
效果图: 源代码: <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
【CSS3动画】利用CSS3制作“百度浏览器”官网奔跑的北极熊效果（不含背景移动）
本期带大家制作百度浏览器官网(目前官网已经注销)中奔跑的北极熊的动画效果. 动画原理奔跑的北极熊动画原理是将北极熊奔跑的各个片段整合在一起,形成一张背景图片,然后设置一个盒子,将背景图片放入,通过设 ...
HTML5+CSS3原百度浏览器背景奔跑的北极熊，加了点小玩意
原百度浏览器背景效果,奔跑的北极熊. 主要是复习CSS3的动画效果. 加了点极光效果和切换模式. 需要素材可以在下方评论. <!DOCTYPE html> <html lang=&q ...
超级强大的SVG SMIL animation动画详解
超级强大的SVG SMIL animation动画详解本文摘自超级强大的SVG SMIL animation动画详解_Zoomla!逐浪CMS官网 (z01.com),网站看上去有年头了,担心哪天会 ...
[转]超级强大的SVG SMIL animation动画详解
超级强大的SVG SMIL animation动画详解本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究. 本文地址:http://www.zhangxinxu.com/word ...
百度浏览器奔跑的北极熊
奔跑的北极熊 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
css3 动画+奔跑的熊案例
动画的使用 1.先定义动画 2.调用动画用keyframes定义动画 @keyframes 动画名称{ /* 开始状态 / 0%{ } / 结束状态 / 100%{ } } 调用动画 animati ...
CSS动画奔跑的小熊案例
CSS动画奔跑的小熊案例资源个人学习代码 <!DOCTYPE html> <html lang="zh-CN"><head><meta ...

animation动画：奔跑的北极熊

奔跑的北极熊

animation动画：奔跑的北极熊相关推荐

最新文章

热门文章