【CSS动画实现奔跑的小熊】

最新推荐文章于 2024-05-16 13:51:26 发布
最新推荐文章于 2024-05-16 13:51:26 发布
阅读量634 收藏 4
点赞数 2
分类专栏： 有趣的demo 文章标签： css 动画 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44934478/article/details/122216616
版权
这篇博客介绍了一个利用CSS动画技术实现的奔跑小熊效果。通过将一张包含多个小熊状态的长图切分为8个部分，在固定大小的div中循环显示，创造出小熊奔跑的视觉效果。
摘要由CSDN通过智能技术生成

奔跑的小熊案例

原百度浏览器下载页面效果 ，其实是通过动画 ，让小熊看起来像在奔跑一样

原理很简单，图片如下：

在这里插入图片描述

这个图片是一张高100px 宽1600px 的图片，里面有八个部分的小熊形态，所以我们可以分成八个部分让小熊在固定宽高的盒子（div 的 width为200px ，height为100px）里显示就行

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <</
最低0.47元/天 解锁文章
度春秋
关注
专栏目录
＜CSS练习＞ 奔跑的小熊 CSS3动画 含素材
weixin_47816527的博客
06-22 2641
本案例用了2个动画 第一个动画是整张的素材（文章末尾） 从左往右依次划过 这里animation属性用步长steps() 第二个是第一个的动画 一直运动到浏览器的中央 animoaion-fill-mode:forwards; 因为素材是白色的 我这里设置了背景图为粉色 更方便看出效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title>
CSS3动画——案例热点图，奔跑的熊大
运算符重载之String
04-15 665
一.动画的基本使用 1》定义动画 2》调用动画 案例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3动画</title> <style> * { ...
奔跑的大熊
weixin_42378409的博客
03-19 346
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
CSS3动画实现小熊奔跑.rar
08-13
CSS3动画实现小熊奔跑.rar
奔跑的小熊动画css
liulang68的博客
08-23 187
<!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&gt...
css动画效果之奔跑的小熊
qq_36939013的博客
08-27 758
【css 动画】css实现奔跑的北极熊
热门推荐
阿牛的博客
11-10 1万+
最近正好在总结css动画相关方面的博客，乘此机会写几个好看有趣的动画特效，css动画还是很有趣的，本文就用动画实现一个奔跑的北极熊！
CSS3 动画-奔跑的小熊
Ksy007的博客
06-09 1048
CSS3 动画之奔跑的小熊 img/bear.png： 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <sty
CSS3动画属性练习-小熊跑跑
angry_rooster的博客
06-06 760
小熊跑跑 通过CSS的动画属性"animation"和at-rule关键帧@keyframe实现一个小熊在雪山奔跑的效果 图片素材见文末 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor
奔跑的熊大案例.rar
04-05
用动画实现奔跑效果
用css动画效果做小熊奔跑
sword_chiu的博客
06-03 2487
代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { background-color: #ccc; } div { position: absolute;
纯CSS3实现动画—奔跑的北极熊
yuan1723936262的博客
06-29 1338
纯css实现的动画
CSS动画效果-奔跑的熊
nuomi_w的博客
11-21 567
<!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" /> <titl
HTML/CSS 遮罩层登录框
木木木森林
12-29 445
HTML/CSS 遮罩层登录框 代码： <!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> .
百度页面奔跑的白熊html、css
最新发布
2302_80141844的博客
05-16 1752
用keyframes定义动画（类似定义类选择器）@keyframes动画名称{0%{100%{
css3实现奔跑的小人动画
车联网开发的博客
12-04 3023
定位  层级和动画的完美融合 效果图 有点吃藕了，图片不重要 &lt;!doctype html&gt; &lt;html&gt;&lt;!--根标签--&gt; &lt;head&gt; &lt;!--不可视区域--&gt; &lt;meta charset="UTF-8"&gt;&lt;!--国际编码--&gt; &lt;!--网页三要素--
简单的CSS3动画案例——奔跑的熊哥
qq_64133626的博客
03-26 1031
这个动画效果其实很简单，只需要用精灵图的方式加上动画和过渡效果就可以实现，用运动曲线steps()，分成8步steps(8)，每次向x轴负方向移动1/8。具体细节还是直接看代码吧： <div class="bg2"></div> <div class="bg1"></div> <div class="bear"></div> 图片如下： 样式： * { padding: 0; ...
奔跑的小熊
提灯寻猫
08-18 448
使用css3中的动画,实现奔跑的小熊
AngularJS中的CSS动画实现与实例
动画在Angular中主要是通过指令（directives）来实现的，例如`ng-hide`指令可以用来控制元素的显示和隐藏，配合CSS的`transition`属性，可以创建平滑的过渡效果。例如，在上述示例中，当用户勾选复选框时，`<div>`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值