逐帧自适应精灵图+css3实现小动画（以及进度条的实现）

最新推荐文章于 2024-07-19 15:32:49 发布

包淼淼

最新推荐文章于 2024-07-19 15:32:49 发布

阅读量2.7k

点赞数 3

分类专栏： css

本文链接：https://blog.csdn.net/qq_32849999/article/details/81874422

版权

css 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1、讲解部分：

一、animation属性设置

要启用css3动画，就要先了解 animation 属性， animation 属性是一个简写属性，用于设置六个动画属性：

animation-name　　　　　　　规定 @keyframes 动画的名称。
animation-duration　　　　　规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function　　规定动画的速度曲线。默认是 “ease”。
animation-delay　　　　　　　规定在动画开始之前的延迟。
animation-iteration-count　　规定动画应该播放的次数。
animation-direction　　　　　规定是否应该轮流反向播放动画。
animation-play-state　　　　　规定动画是否正在运行或暂停。默认是 “running”。
animation-fill-mode　　　　　规定动画在播放之前或之后，其动画效果是否可见。

逐帧动画最关键的是设置：animation-timing-function 属性为：steps(n,[ start | end ])。

这个n是一个自然数，意思就是把一个动画平均分成n等分，直到平均地走完这个动画，这个要跟linear区别开来，因为linear是把动画作为一个整体，中间没有断点，而steps是把动画分段平均执行开来。step-start等同于steps(1,start)，动画分成1步，动画执行时为开始左侧端点的部分为开始；step-end等同于steps(1,end)：动画分成一步，动画执行时以结尾端点为开始，默认值为end。对此，w3c图解如下：
这里写图片描述

具体实例解释：假设对它应用 steps(3, start) 和 steps(3, end) ，做出阶跃函数曲线如下：

1、steps(3, start)

这里写图片描述

steps() 第一个参数将动画分割成三段。当指定跃点为 start 时，动画在每个计时周期的起点发生阶跃（即图中空心圆 → 实心圆）。由于第一次阶跃发生在第一个计时周期的起点处（0s），所以我们看到的第一步动画（初态）就为 1/3 的状态，因此在视觉上动画的过程为 1/3 → 2/3 → 1 。

2、steps(3， end)

这里写图片描述

当指定跃点为 end，动画则在每个计时周期的终点发生阶跃（即图中空心圆 → 实心圆）。由于第一次阶跃发生在第一个计时周期结束时（1s），所以我们看到的初态为 0% 的状态；而在整个动画周期完成处（3s），虽然发生阶跃跳到了 100% 的状态，但同时动画结束，所以 100% 的状态不可视。因此在视觉上动画的过程为 0 → 1/3 → 2/3

二、精灵图的设置

了解了逐帧动画的关键设置，我们再来继续学习精灵图的部分。

这里写图片描述

用这张精灵图最终实现的效果如下图：
这里写图片描述

1、首先定义元素的基本css属性

.boxA {
    width: 300px;  /*宽高尺寸任意增减*/
    height: 100px;
    background:url("http://img.mukewang.com/565d07490001365329660269.png") no-repeat;
    background-size: 400% 100%;  /*这项是关键，用来撑开拼凑起来的序列帧，一行4帧图就是400%*/
    -webkit-animation: bird-slow .5s steps(3) infinite;  /*发生了3次位移steps就是3*/
    animation: bird-slow .5s steps(3) infinite;
}

2、然后定义动画关键帧属性

@keyframes bird-slow {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 99% 0%;  /*整张图是100%，3次位移每一次是33%，第三次就是99%*/
    }
}
@-webkit-keyframes bird-slow {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 99% 0%;
    }
}

最后给html元素套用这个class即可看到效果了

2、代码部分

index.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超富创意的CSS3飞机跑道进度条动画DEMO演示</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="demo">
	<div class="container">
		<div class="row">
			<div class="col-md-offset-3 col-md-6">
				<h3 class="progressbar-title">HTML5</h3>
				<div class="progress">
					<div class="progress-bar" style="width: 55%; background:#005394;">
						<span>55%</span>
					</div>
				</div>
	 
				<h3 class="progressbar-title">CSS3</h3>
				<div class="progress">
					<div class="progress-bar" style="width: 100%; background:#d9534f;">
						<span>100%</span>
					</div>
				</div>
				<div class="machine"></div>
				<div class="boxA"></div>
				<h3 class="progressbar-title">Java Script</h3>
					<div class="progress">
						<div class="progress-bar" style="width: 40%; background:#f0ad4e;">
							<span>40%</span>
						</div>
					</div>
			</div>
		</div>
	</div>
</div>

<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>

</body>
</html>

css/style.css

body{
	background: #a8b1b6;
	color: #2fa0ec;
	font-weight: 500;
	font-size: 1.05em;
	font-family: "Microsoft YaHei","����","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
}
a{color: #d8dedc;outline: none;}
a:hover,a:focus{color:#74777b;text-decoration: none;}
.demo{width: 100%;padding: 2em 0;}

.progress{
    height: 30px;
    line-height: 35px;
    background: #809495;
    box-shadow: none;
    padding: 6px;
    margin-top:20px;
    overflow: visible;
    border-radius:10px;
}
.progress:after{
    content: "";
    display: block;
    border-top: 4px dashed #fff;
    margin-top:8px;
}
.progressbar-title{
    color:#d8dedc;
    font-size:15px;
    margin:5px 0;
    font-weight: bold;
}
.progress .progress-bar{
    position: relative;
    border-radius: 10px 0 0 10px;
    animation: animate-positive 3s;
}
.progress .progress-bar span{
    position: absolute;
    top: -50px;
    right: -40px;
    color: #fff;
    display: block;
    font-size: 17px;
    font-weight: bold;
    padding: 5px 7px;
    background: #333;
    border-radius: 0 0 5px 5px;
}
.progress .progress-bar span:before{
    content: "";
    position: absolute;
    bottom: -14px;
    left: 18px;
    border: 7px solid transparent;
    border-top: 7px solid #333;
}
.progress .progress-bar span:after{
    /*飞机*/
    content: "\f072";
    font-family: fontawesome;
    font-size: 48px;
    color: #333;
    position: absolute;
    top: 51px;
    right: 6px;
    transform: rotateZ(48deg);
}
@-webkit-keyframes animate-positive {
    0% { width: 0%;}
}
@keyframes animate-positive {
    0% { width:0%; }
}
.machine{
    background: url("../machine.png") no-repeat;
    background-size: 100% 1600%;
    width: 380px;
    height: 380px;
    overflow: hidden;
    animation: statetop 3s steps(15) backwards;
    -webkit-animation: statetop 3s steps(15) backwards;
    -moz-animation: statetop 3s steps(15) backwards;
    -o-animation: statetop 3s steps(15) backwards;
}
@-webkit-keyframes statetop {
    0%{
        background-position: 0% 0%;

    }
    100%{
        background-position: 0% 100%;
    }
}
@-moz-keyframes statetop {
    0%{
        background-position: 0% 0%;

    }
    100%{
        background-position: 0% 100%;
    }
}
@-o-keyframes statetop {
    0%{
        background-position: 0% 0%;

    }
    100%{
        background-position: 0% 100%;
    }
}
@keyframes statetop {
    0%{
        background-position: 0% 0%;

    }
    100%{
        background-position: 0% 100%;
    }
}
.boxA {
    width: 300px;  /*宽高尺寸任意增减*/
    height: 100px;
    background:url("http://img.mukewang.com/565d07490001365329660269.png") no-repeat;
    background-size: 400% 100%;  /*这项是关键，用来撑开拼凑起来的序列帧，一行4帧图就是400%*/
    -webkit-animation: bird-slow .5s steps(3) infinite;  /*发生了3次位移steps就是3*/
    animation: bird-slow .5s steps(3) infinite;
}
@keyframes bird-slow {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 99% 0%;  /*整张图是100%，3次位移每一次是33%，第三次就是99%*/
    }
}
@-webkit-keyframes bird-slow {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 99% 0%;
    }
}

精灵图：machine.png

包淼淼

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
逐帧自适应精灵图+css3实现小动画（以及进度条的实现）

1、讲解部分：一、animation属性设置要启用css3动画，就要先了解 animation 属性， animation 属性是一个简写属性，用于设置六个动画属性：animation-name　　　　　　　规定 @keyframes 动画的名称。animation-duration　　　　　规定完成动画所花费的时间，以秒或毫秒计。animation-timing-function...
复制链接

扫一扫

专栏目录