animation动画-精灵图应用

最新推荐文章于 2024-07-18 20:18:47 发布
最新推荐文章于 2024-07-18 20:18:47 发布
阅读量115 收藏
点赞数
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L081773/article/details/124203339
版权

HTML：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小鸟飞</title>
		<link rel="stylesheet" type="text/css" href="../css/小鸟.css"/>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

CSS：

.box{
	width: 140px;
	height:98px;
	background: url(../img/bird.png) no-repeat ;
	animation: fly .5s steps(8) infinite ,name 5s linear infinite ;  /* 调用 */
}
@keyframes fly{														/* key帧 */
	0%{
		
		background-position: 0 0;
		}
	100%{
		background-position:-1102px 0;
	}
}
@keyframes name{
	0%{
		margin-left: 0px;
	}
	100%{
		margin-left: 1500px;
	}
}

L081773
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css-精灵图跑动效果（animation）
weixin_47438730的博客
08-24 435
css-精灵图跑动效果（animation）
CSS animation动画效果实现精灵图、雪碧图动画，多动画应用
weixin_45472872的博客
05-10 4826
CSS animation动画效果实现精灵图、雪碧图动画，多动画应用 素材下载 分析图片动画过程 图片可以分成4*6=24 小图片也就是24帧 方法1 可以把每一行成一个动画，所以可以拆分4个动画 方法2 独立写成一个动画 动画一共24帧 100/24≈4 每4%作为一帧 方法1 页面主要框架 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
Web 页面如何实现动画效果
weixin_52437323的博客
02-04 314
Web 页面实现动画效果
精灵图(sprite)实现动画
weixin_45545395的博客
04-25 2690
精灵图(sprite)实现动画 1.精灵图制作        将每一帧图片按动画序列顺序放好，然后调出PhotoShop的网格，调好每一帧的位置，同一行每一帧之间的距离等距，上下两行间的距离也调成等距。 2.代码        用PhotoShop中的标尺工具测量图片高度，作为css中height的值，如果图片做的比较好可直接用百分比(50%)，width的值为整个图
程序员的中秋节
楠黎倾风的博客
08-23 7092
中秋节
css3：使用animation做一个精灵图的动画效果
weixin_46682277的博客
12-16 555
代码示例： <style> .box{ width: 140px; height: 140px; /*引入本地的一张精灵图*/ background-image: url(./images/bg.png); /*用了两个动画效果，run和move*/ animation: run 1s steps(12) infinite, move 8s infinite; } @keyframes run { from { /*图片初始位置*/ bac.
爱心css特效,CSS3 SVG点击爱心散开动画特效
weixin_39625098的博客
08-04 569
* {margin:0;padding:0;box-sizing:border-box;position:relative;}svg.like {position:fixed;z-index:10;top:calc(50vh - 160px);left:calc(50vw - 160px);border-radius:100%;-webkit-transform:scale(0.3);transf...
css实现飞翔的鸟
HAI6545的博客
01-13 403
<!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>飞翔的小鸟&l.
精灵图（sprite）CSS动画实现
岁月不饶人，我亦未曾饶过岁月
05-14 6124
精灵图 动画效果如下 HTML代码 <div class="boxA"></div> css代码 .boxA { width: 100px; height: 400px; background:url("https://img-ask.csdn.net/upload/202005/13/1589349016_808127.png") no-repeat; background-size: 600% 100%; -webkit-animat
[css3动画教程]：逐帧自适应精灵图
我的米饭
02-17 4529
一、animation属性设置要启用css3动画，就要先了解 animation 属性， animation 属性是一个简写属性，用于设置六个动画属性：animation-name　　　　　　　规定 @keyframes 动画的名称。 animation-duration　　　　　规定完成动画所花费的时间，以秒或毫秒计。 animation-timing-function　　规定动画的速度曲线。
前端学习（259）:flex-flow
歌谣的博客
12-30 397
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
css3 精灵图制作动画
Lv骚年
06-06 564
示例： background-size: 1600% 100%; -webkit-animation: FireAnimation 3s steps(16) infinite; -o-animation: FireAnimation 3s steps(16) infinite; animation: FireAnimation 3s steps(16) infinite; @-webkit-...
Unity制作简单的精灵图动画（新手向）
weixin_52847003的博客
09-26 3771
使用精灵图制作动画步骤： 1.精灵图准备 2.制作动画 一、精灵图导入
css animation实现图片切换效果
热门推荐
殇蓝的博客
01-15 1万+
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;meta name="viewport" content="initial-scale=1.0,
Tailwind CSS：颠覆常规的实用主义设计利器
艾恩小灰灰的博客
07-18 248
Tailwind CSS 是一个实用类优先的 CSS 框架，它不提供预设的组件或设计系统，而是通过一系列小而功能明确的实用类，允许开发者快速构建自定义的设计。与 Bootstrap、Foundation 等传统框架相比，Tailwind 更强调灵活性和可定制性。Tailwind CSS 通过其独特的实用类优先方法，为前端开发带来了新的视角。它不仅简化了样式编写，还提高了开发效率和代码的可维护性。
CSS 技巧与案例详解：开篇介绍
粉丝们务必加入微信粉丝群
07-14 97
本系列文章分为多个部分，每个部分都详细解析了CSS的各种实用技巧和经典案例。CSS 单位速查表 & 自定义引用标记 & 重置所有样式：了解常见CSS单位，并学习如何创建自定义的引用标记和重置样式表。隐藏空元素 & 完美的嵌套边框圆角 & 排版比例基础知识：掌握隐藏元素的方法，实现嵌套圆角边框，以及排版比例的基本概念。自定义文本选择 & 流式排版：定制文本选择的样式，探索流式排版的奥秘。为什么line-height是无单位的 & 兄弟元素淡出效果 & 蚀刻文字效果。
CSS实现从上往下过渡效果
Rverdoser的博客
07-18 130
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1243
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
HTML5+CSS3小实例：纯CSS实现奥运五环
艾恩小灰灰的博客
07-15 1215
实例：纯CSS实现奥运五环。技术栈：HTML+CSS。
前端学习（二）之HTML
最新发布
2302_79795489的博客
07-18 663
在<input type="text" name="username" value="西瓜大侠">中，2、单选和多选：radio和checkbox（对应value为选项的值，当选中时，这个值会被提交）3、按钮：button、submit和reset（对应value为按钮上的标签文本）4、隐藏字段：hidden（对应value为隐藏在表单中的用户不可见的数值）段落格式标签：加粗b，斜体i，下划线u，删除线s，换行br，水平分割线hr。1、name：给表单控件起的名字，服务器靠这个名字来识别和获取输入的数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值