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

番茄西红柿发布于2019-04-23 13:28 / 3373人阅读

摘要：犹豫了好久，在考虑说要自己搭建一个博客平台，还是在博客园里面注册个账号来跟大家做一些前端技术的分享，后来因为种种原因，也希望在博客园这个大家庭中能够跟大家互相探讨，于是便有了灿爷的前端之路好了，废话不多说，撸起袖子开干今天的主题是奔跑的小羊

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

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

今天的主题是奔跑的小羊，主要御用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>
    <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动画第一篇高性能css3动画浏览器对和css3的支持

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1915.html

[练习]利用CSS steps 实现逐帧动画

摘要：网页逐帧动画的实现方式网页中的逐帧动画，大致可分为两大类的实现方式，分别是使用控制，和单纯使用实现，两者的优劣总体概括来说就是动画可控性更强，但开销大，实现复杂。网页逐帧动画的实现方式网页中的逐帧动画，大致可分为两大类的实现方式，分别是使用JS控制，和单纯使用CSS实现，两者的优劣总体概括来说就是： JS动画可控性更强，但开销大，实现复杂。 CSS动画实现相对JS更简单。常见的网...

RiverLi 2019-08-30 12:55 评论0 收藏0
Chrome 小恐龙游戏源码探究八 -- 奔跑的小恐龙

摘要：例如，将函数修改为小恐龙眨眼这样小恐龙会不停的眨眼睛。小恐龙的开场动画下面来实现小恐龙对键盘按键的响应。接下来还需要更新动画帧才能实现小恐龙的奔跑动画。文章首发于我的 GitHub 博客前言上一篇文章：《Chrome 小恐龙游戏源码探究七 -- 昼夜模式交替》实现了游戏昼夜模式的交替，这一篇文章中，将实现：1、小恐龙的绘制 2、键盘对小恐龙的控制 3、页面失焦后，重新聚焦会重置...

paulquei 2019-08-23 17:09 评论0 收藏0
个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

sherlock221 2019-08-20 18:59 评论0 收藏0
个人分享--web前端学习资源分享

摘要：前言月份开始出没社区，现在差不多月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了一般来说，差不多到了转正的时候，会进行总结或者分享会议那么今天我就把看过的一些学习资源主要是博客，博文推荐分享给大家。 1.前言 6月份开始出没社区，现在差不多9月了，按照工作的说法，就是差不多过了三个月的试用期，准备转正了！一般来说，差不多到了转正的时候，会进行总结或者分享会议！那么今天我就...

Ethan815 2019-08-05 11:54 评论0 收藏0
【CSS】一文读懂 Animation 中的时间函数 steps

摘要：本文主要介绍中的函数。在执行动画时默认以函数进行过渡，会在每个关键帧之间插入补间动画，所以动画效果是连贯的。因此并非作用于整个动画，而是作用于每两个关键帧之间，与动画的时长播放次数等都无关，所以整个动画的执行时间还是中设定的。利用 CSS3 的 Animation 可以创建动画，在许多页面中能够替代 Flash、JS 等，提升页面加载速度。众所周知，Animation 有 8 大属性...

AJie 2019-08-29 17:19 评论0 收藏0