css sprite 动画制作

最新推荐文章于 2024-11-30 11:29:35 发布

前端hacker97

最新推荐文章于 2024-11-30 11:29:35 发布

阅读量975

点赞数 2

分类专栏： css3 html历史网页历史 web标准 html+css+js 文章标签： css动画 css sprite

本文链接：https://blog.youkuaiyun.com/qq_24928451/article/details/45344925

版权

html历史网页历史 web标准 html+css+js 同时被 2 个专栏收录

20 篇文章

订阅专栏

css3

2 篇文章

订阅专栏

本文介绍如何使用CSS精灵技术实现简单的动画效果。通过设置背景图片的位置变化来模拟动画帧的效果，结合HTML和CSS代码实例，展示了从创建HTML文件到定义关键帧动画的全过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">首先我们先要需要一张图片  可以百度css sprite 图片保存到电脑，就可以用了</span><img src="https://img-blog.youkuaiyun.com/20150428222643908?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjQ5Mjg0NTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);" />

新建一个html文件和css文件

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

div{
	height: 93px;/*要显示框架的高度，可用尺子量*/
	width: 35px;/*要显示框架的宽度，可用尺子量*/
	margin: 100px;
	position: relative;
	-webkit-animation: anmi /*动画的名字*/ 3s /*动画持续的时间*/ infinite alternate /*动画循环*/;
	background: #00FFFF /*背景色*/ url(../../img/00351417.jpg) /*背景图片*/ no-repeat /*图片不平铺*/ ;
}
@-webkit-keyframes anmi{   /*动画*/
	0%{background-position:-8px -1px }
	10%{background-position:-40px -1px }
	20%{background-position:-70px -1px }
	30%{background-position:-100px -1px }
	40%{background-position:-130px -1px }
	50%{background-position:-160px -1px }
	60%{background-position:-190px -1px }
	70%{background-position:-210px -1px }
	80%{background-position:-240px -1px }
	90%{background-position:-270px -1px }
	100%{background-position:-8px -1px }
}

效果图