使用ccs 制作雪碧图 简单 一看就懂
【摘要】 我不喜欢胖子，但她胖就没事今天我们来制作雪碧图（就是将很多小图标放在一张图片中） 一.利用雪碧图有很多优点 :1.可以减小图片的总大小2.一次请求，可减小建立键连接的消耗在这里我们来做一个运动的小人就是将小人的多个动作放在一张图片上，然后利用css动画效果让其运动起来，就能呈现出小人再跑的效果，即也是雪碧图。 1.html代码<body><div class="box1"></div></b...
我不喜欢胖子，但她胖就没事
今天我们来制作雪碧图（就是将很多小图标放在一张图片中）
一.利用雪碧图有很多优点 :
1.可以减小图片的总大小
2.一次请求，可减小建立键连接的消耗
在这里我们来做一个运动的小人
就是将小人的多个动作放在一张图片上，然后利用css动画效果让其运动起来，就能呈现出小人再跑的效果，即也是雪碧图。
1.html代码
<body><div class="box1"></div></body>
先创建一个容器，为了让效果更好，我们索性直接将容器大小设置和‘’图片大小一样，下面写css代码
2.css代码
.box1{
width: 55px;
height: 92px;
background-image: url('./少年.png');
}
同时将小人设置为容器的背景，(图片地址需修改)
3.让小人动起来
下面我们来让小人动起来，就需要使用css的动画效果
上代码：
@keyframes test{
from{
background-position: 0 0;
}
to{
background-position: -460px 0;
}
}
这里form代表图片的起始位置，同代表最终位置。其中里面的参数需要我们测量图片中一个小人占据的像素。
4.引用@keyframes test
将此动画效果引用到css代码中
如下:
animation: test 0.3s forwards infinite steps(7);
运动速度0.3s
forwards :f当动画完成后，保持最后一帧的状态（也就是最后一个关键帧中定义的状态）
infinite :循环播放
step（）:设置跳动次数(这里小人分了7个动作，所以分为七次播放)
下面将代码运行就可以看到效果了，当然我们也可以换成其他的图片活的更惊艳的效果
【版权声明】本文为华为云社区用户原创内容，未经允许不得转载，如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）