欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

博客园第一篇随笔---css3动画(奔跑的小杨)

程序员文章站 2023-09-28 15:13:30
犹豫了好久,在考虑说要自己搭建一个博客平台,还是在博客园里面注册个账号来跟大家做一些前端技术的分享,后来因为种种原因,也希望在博客园这个大家庭中能够跟大家互相探讨,于是便有了灿爷的前端之路 好了,废话不多说,撸起袖子开干 今天的主题是奔跑的小羊,主要御用css3的动画实现小羊的奔跑,知识点简单,但是 ......

犹豫了好久,在考虑说要自己搭建一个博客平台,还是在博客园里面注册个账号来跟大家做一些前端技术的分享,后来因为种种原因,也希望在博客园这个大家庭中能够跟大家互相探讨,于是便有了灿爷的前端之路

好了,废话不多说,撸起袖子开干

今天的主题是奔跑的小羊,主要御用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             }

效果如下

博客园第一篇随笔---css3动画(奔跑的小杨)

好了,大差不差了,最终奔跑的小羊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>

博客园第一篇随笔---css3动画(奔跑的小杨)