CSS animation动画效果实现精灵图、雪碧图动画，多动画应用

最新推荐文章于 2024-07-09 12:16:47 发布

笍芪懿

最新推荐文章于 2024-07-09 12:16:47 发布

阅读量4.8k

点赞数 4

分类专栏：前端文章标签： css3 css html html5

本文链接：https://blog.csdn.net/weixin_45472872/article/details/106041561

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>特朗普动画</title>
    </head>

<body>
    <div>


    </div>
    <h2>
        hover执行
    </h2>
    <div class="box"></div>
</body>

</html

图解图片每个帧的background-position属性，图片的分辨率为600*400
background-position: 0 0;第一个值是水平位置，第二个值是垂直位置。
下面的值是相对div,图片需要移动的值（px）

图片向左移动为负值，向右相反，图片向上移动为负值，向下相反

CSS样式

 <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px red solid;
            background-image: url("./images/trump_run.png");
            /* 设置背景不重复方便调节 */
            background-repeat: no-repeat;
            /* 多动画使用,隔开   	
            run2 2s 2s steps(5)
            run2规定需要绑定到选择器的 keyframe 名称,
            2s规定完成动画所花费的时间,
            2s规定在动画开始之前的延迟,
            steps(5)规定动画的步数。 */            
            animation: run 2s steps(5), run2 2s 2s steps(5), run3 2s 4s steps(5), run4 2s 6s steps(5);
            animation-iteration-count: infinite, infinite, infinite, infinite;

        }
	//第一行动画
        @keyframes run {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: -500px 0;
            }

        }
//第二行动画
        @keyframes run2 {

            from {
                background-position: 0px -100px;
            }

            to {
                background-position: -500px -100px;
            }

        }
	//第三行动画
        @keyframes run3 {

            from {
                background-position: -0px -200px;
            }

            to {
                background-position: -500px -200px;
            }

        }
	//第四行动画
        @keyframes run4 {

            from {
                background-position: -0px -300px;
            }

            to {
                background-position: -500px -300px;
            }

        }

        .box {
            animation-play-state: paused;
        }

        .box:hover {
        //鼠标经过执行动画
            animation-play-state: running;
        }
    </style>

效果

方法2

将图片拆分24帧,并写上对应background-position,写完应用动画就行了

@keyframes identifier {
1*4%{background-position: }
2*4%	.
3*4%	.
4*4%	.
5*4%	.
6*4%	.
7*4%
8*4%	.
9*4%
10*4%
11*4%	.
12*4%
13*4%
14*4%	.
15*4%
16*4%
17*4%
18*4%	.
19*4%
20*4%
21*4%	.
22*4%
23*4%	.
24*4%{background-position: }
}

笍芪懿

关注

4
点赞
踩
20

收藏

觉得还不错? 一键收藏
7
评论
CSS animation动画效果实现精灵图、雪碧图动画，多动画应用

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">
复制链接

扫一扫