奔跑的北极熊特效实现——动画animation练习

效果图：

源代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {background-color: #ddd;}span {display: block;height: 100px;width: 300px;text-align: center;line-height: 100px;font-size: 48px;margin: 150px auto;border-bottom: 1px solid #00a4ff;}.bg1 {position: absolute;bottom: 0px;height: 300px;width: 100%;background: url(image/bg1.png) repeat-x;animation: change_bg 5s linear infinite;}.bg2 {position: absolute;bottom: 0px;height: 300px;width: 100%;z-index: 1;background: url(image/bg2.png) repeat-x;animation: change_bg 5s linear infinite;}.img {position: fixed;bottom: 10px;height: 100px;width: 200px;z-index: 2;background: url(image/bear.png);animation: bear .4s steps(8) infinite, change_pos 2s forwards;}@keyframes bear {0% {background-position: 0 0;}100% {background-position: -1600px 0;}}@keyframes change_pos {0% {left: 0;}100% {left: 50%;transform: translate(-50%, 0);}}@keyframes change_bg {0% {background-position: 0 0;}100% {background-position: -3840px 0;}}</style>
</head><body><span>奔跑的北极熊</span><div class="bg1"></div><div class="bg2"></div><div class="img"></div>
</body></html>

所用资源图：
bg1:

bg2:

bear：

奔跑的北极熊特效实现——动画animation练习相关推荐

animation动画：奔跑的北极熊
奔跑的北极熊效果图 (模仿以前百度浏览器背景制作) 实现代码 html部分 <!DOCTYPE html> <html lang="en"><hea ...
【CSS3动画】利用CSS3制作“百度浏览器”官网奔跑的北极熊效果（不含背景移动）
本期带大家制作百度浏览器官网(目前官网已经注销)中奔跑的北极熊的动画效果. 动画原理奔跑的北极熊动画原理是将北极熊奔跑的各个片段整合在一起,形成一张背景图片,然后设置一个盒子,将背景图片放入,通过设 ...
纯CSS3实现动画—奔跑的北极熊
纯CSS3实现动画-奔跑的北极熊代码如下:直接复制粘贴即可食用(注意背景图片路径) <!DOCTYPE html> <html lang="en">< ...
HTML5+CSS3原百度浏览器背景奔跑的北极熊，加了点小玩意
原百度浏览器背景效果,奔跑的北极熊. 主要是复习CSS3的动画效果. 加了点极光效果和切换模式. 需要素材可以在下方评论. <!DOCTYPE html> <html lang=&q ...
十四、CSS 3新特性详解（二）——2D转换（transform）、动画(animation)、动画序列
HTML5 第二天一.rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转使用步骤: 给元素添加转换属性 transform 属性值为 rotate(角度) 如 transfor ...
【Unity Shader】Special Effects（一）UI特效的动画播放器
更新日期:2021年8月16日. Github源码:[点我获取源码] 索引 [系列简介] [SpecialEffects 模块简介] [UI特效的动画播放器] 下载SpecialEffects模块使 ...
百度浏览器奔跑的北极熊
奔跑的北极熊 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
H5 css3入门基础练习特效、动画、表单
知识回顾: 1)SQL优化,规范,(本身这些细碎的知识点,) 不是马上掌握,面对这么多it技术,扩展眼界 jsp+servlet java做页面,马上被市场淘汰初学者 a. 提高打字速度, 1- 每 ...
vue动画特效-渐变动画和@keyframes
vue动画特效-渐变动画和@keyframes 过渡原理实现 @keyframes动画使用animated.css 同时使用过渡和@keyframes动画动画时长的问题今天学习vue的动画的 ...

奔跑的北极熊特效实现——动画animation练习

奔跑的北极熊特效实现——动画animation练习相关推荐

最新文章

热门文章