博客园第一篇随笔---css3动画（奔跑的小杨）
程序员文章站
2023-09-28 15:13:30
犹豫了好久，在考虑说要自己搭建一个博客平台，还是在博客园里面注册个账号来跟大家做一些前端技术的分享，后来因为种种原因，也希望在博客园这个大家庭中能够跟大家互相探讨，于是便有了灿爷的前端之路 好了，废话不多说，撸起袖子开干 今天的主题是奔跑的小羊，主要御用css3的动画实现小羊的奔跑，知识点简单，但是 ......
犹豫了好久，在考虑说要自己搭建一个博客平台，还是在博客园里面注册个账号来跟大家做一些前端技术的分享，后来因为种种原因，也希望在博客园这个大家庭中能够跟大家互相探讨，于是便有了灿爷的前端之路
好了，废话不多说，撸起袖子开干
今天的主题是奔跑的小羊，主要御用css3的动画实现小羊的奔跑，知识点简单，但是好玩，纯属娱乐，希望大家喜欢
首先先实现一只小羊原地踏步的效果，如下
1 .sheep {
2 width: 162.75px;
3 height: 122px;
4 margin: 100px auto;
5 background: pink;
6 background-image: url('./images/sheep.png');
7 background-repeat: no-repeat;
8 animation: run 1s steps(7) infinite;
9 }
10 @keyframes run {
11 0% {
12 background-position: 0 0;
13 }
14 100% {
15 background-position: 100% 0;
16 }
17 }
接着要实现小羊从右往走奔跑移动，这个时候我们就要再建立一个动画 run2，代码如下
1 .box {
2 position: relative;
3 overflow: hidden;
4 width: 900px;
5 height: 400px;
6 margin: 100px auto;
7 background-color: #2090c0
8 }
9 .sheep {
10 position: absolute;
11 right: -164px;
12 width: 162.75px;
13 height: 122px;
14 margin: auto;
15 background-image: url('./images/sheep.png');
16 background-repeat: no-repeat;
17 animation: run 1s steps(7) infinite,
18 run2 5s linear infinite;
19 }
20 @keyframes run {
21 0% {
22 background-position: 0 0;
23 right: -164px
24 }
25 100% {
26 background-position: 100% 0;
27 right: 900px
28 }
29 }
30 @keyframes run2 {
31 0% {
32 right: -164px
33 }
34 100% {
35 right: 900px
36 }
37 }
效果如下
好了，大差不差了，最终奔跑的小羊demo已经完成，接下去附上完整代码
<!doctype html><!--声明文档类型:html-->
<html><!--超文本标记语言 根目录节点标签-->
<head><!--头部:给浏览器看的-->
<meta charset="utf-8"><!--字符编码:国际编码-->
<!--网页三要素 标题 关键词 描述-->
<title>动画-奔跑的小羊</title>
<meta name="description" content="描述:对网页文档的大概的介绍">
<!--关键词:提供给搜索引擎搜索网站使用-->
<meta name="keywords" content="跑跑,小杨">
<style>
*{
margin:0;
padding:0;
}
.box {
position: relative;
overflow: hidden;
width: 900px;
height: 400px;
margin: 100px auto;
background-color: #2090c0
}
.sheep {
position: absolute;
right: -164px;
width: 162.75px;
height: 122px;
margin: auto;
background-image: url('./images/sheep.png');
background-repeat: no-repeat;
animation: run 1s steps(7) infinite,
run2 5s linear infinite;
}
.sheep:nth-child(2) {
margin: 130px auto 0;
animation: run 1s steps(7) infinite,
run2 4s linear infinite;
}
.sheep:nth-child(3) {
margin: 260px auto 0;
animation: run 1s steps(7) infinite,
run2 3s linear infinite;
}
@keyframes run {
0% {
background-position: 0 0;
right: -164px
}
100% {
background-position: 100% 0;
right: 900px
}
}
@keyframes run2 {
0% {
right: -164px
}
100% {
right: 900px
}
}
</style>
</head>
<body>
<div class="box">
<div class="sheep"></div>
<div class="sheep"></div>
<div class="sheep"></div>
</div>
</body>
</html>