成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

博客園第一篇隨筆---css3動(dòng)畫(huà)（奔跑的小楊）

番茄西紅柿 / 3544人閱讀

摘要：猶豫了好久，在考慮說(shuō)要自己搭建一個(gè)博客平臺(tái)，還是在博客園里面注冊(cè)個(gè)賬號(hào)來(lái)跟大家做一些前端技術(shù)的分享，后來(lái)因?yàn)榉N種原因，也希望在博客園這個(gè)大家庭中能夠跟大家互相探討，于是便有了燦爺?shù)那岸酥泛昧?，廢話(huà)不多說(shuō)，擼起袖子開(kāi)干今天的主題是奔跑的小羊

猶豫了好久，在考慮說(shuō)要自己搭建一個(gè)博客平臺(tái)，還是在博客園里面注冊(cè)個(gè)賬號(hào)來(lái)跟大家做一些前端技術(shù)的分享，后來(lái)因?yàn)榉N種原因，也希望在博客園這個(gè)大家庭中能夠跟大家互相探討，于是便有了燦爺?shù)那岸酥?/p>

好了，廢話(huà)不多說(shuō)，擼起袖子開(kāi)干

今天的主題是奔跑的小羊，主要御用css3的動(dòng)畫(huà)實(shí)現(xiàn)小羊的奔跑，知識(shí)點(diǎn)簡(jiǎn)單，但是好玩，純屬娛樂(lè)，希望大家喜歡

首先先實(shí)現(xiàn)一只小羊原地踏步的效果，如下

 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 }

接著要實(shí)現(xiàn)小羊從右往走奔跑移動(dòng)，這個(gè)時(shí)候我們就要再建立一個(gè)動(dòng)畫(huà) 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已經(jīng)完成，接下去附上完整代碼

doctype html>
<html>
    <head>
        <meta charset="utf-8">
        
        <title>動(dòng)畫(huà)-奔跑的小羊title>
        <meta name="description" content="描述:對(duì)網(wǎng)頁(yè)文檔的大概的介紹">
        
        <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>

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1915.html

相關(guān)文章

  • [練習(xí)]利用CSS steps 實(shí)現(xiàn)逐幀動(dòng)畫(huà)

    摘要：網(wǎng)頁(yè)逐幀動(dòng)畫(huà)的實(shí)現(xiàn)方式網(wǎng)頁(yè)中的逐幀動(dòng)畫(huà)，大致可分為兩大類(lèi)的實(shí)現(xiàn)方式，分別是使用控制，和單純使用實(shí)現(xiàn)，兩者的優(yōu)劣總體概括來(lái)說(shuō)就是動(dòng)畫(huà)可控性更強(qiáng)，但開(kāi)銷(xiāo)大，實(shí)現(xiàn)復(fù)雜。 網(wǎng)頁(yè)逐幀動(dòng)畫(huà)的實(shí)現(xiàn)方式 網(wǎng)頁(yè)中的逐幀動(dòng)畫(huà)，大致可分為兩大類(lèi)的實(shí)現(xiàn)方式， 分別是使用JS控制，和單純使用CSS實(shí)現(xiàn)，兩者的優(yōu)劣總體概括來(lái)說(shuō)就是： JS動(dòng)畫(huà)可控性更強(qiáng)，但開(kāi)銷(xiāo)大，實(shí)現(xiàn)復(fù)雜。 CSS動(dòng)畫(huà)實(shí)現(xiàn)相對(duì)JS更簡(jiǎn)單。常見(jiàn)的網(wǎng)...

    RiverLi 評(píng)論0 收藏0

  • Chrome 小恐龍游戲源碼探究八 -- 奔跑的小恐龍

    摘要：例如，將函數(shù)修改為小恐龍眨眼這樣小恐龍會(huì)不停的眨眼睛。小恐龍的開(kāi)場(chǎng)動(dòng)畫(huà)下面來(lái)實(shí)現(xiàn)小恐龍對(duì)鍵盤(pán)按鍵的響應(yīng)。接下來(lái)還需要更新動(dòng)畫(huà)幀才能實(shí)現(xiàn)小恐龍的奔跑動(dòng)畫(huà)。 文章首發(fā)于我的 GitHub 博客 前言 上一篇文章：《Chrome 小恐龍游戲源碼探究七 -- 晝夜模式交替》實(shí)現(xiàn)了游戲晝夜模式的交替，這一篇文章中，將實(shí)現(xiàn)：1、小恐龍的繪制 2、鍵盤(pán)對(duì)小恐龍的控制 3、頁(yè)面失焦后，重新聚焦會(huì)重置...

    paulquei 評(píng)論0 收藏0

  • 個(gè)人分享--web前端學(xué)習(xí)資源分享

    摘要：前言月份開(kāi)始出沒(méi)社區(qū)，現(xiàn)在差不多月了，按照工作的說(shuō)法，就是差不多過(guò)了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了一般來(lái)說(shuō)，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議那么今天我就把看過(guò)的一些學(xué)習(xí)資源主要是博客，博文推薦分享給大家。 1.前言 6月份開(kāi)始出沒(méi)社區(qū)，現(xiàn)在差不多9月了，按照工作的說(shuō)法，就是差不多過(guò)了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了！一般來(lái)說(shuō)，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議！那么今天我就...

    sherlock221 評(píng)論0 收藏0

  • 【CSS】一文讀懂 Animation 中的時(shí)間函數(shù) steps

    摘要：本文主要介紹中的函數(shù)。在執(zhí)行動(dòng)畫(huà)時(shí)默認(rèn)以函數(shù)進(jìn)行過(guò)渡，會(huì)在每個(gè)關(guān)鍵幀之間插入補(bǔ)間動(dòng)畫(huà)，所以動(dòng)畫(huà)效果是連貫的。因此并非作用于整個(gè)動(dòng)畫(huà)，而是作用于每?jī)蓚€(gè)關(guān)鍵幀之間，與動(dòng)畫(huà)的時(shí)長(zhǎng)播放次數(shù)等都無(wú)關(guān)，所以整個(gè)動(dòng)畫(huà)的執(zhí)行時(shí)間還是中設(shè)定的。 利用 CSS3 的 Animation 可以創(chuàng)建動(dòng)畫(huà)，在許多頁(yè)面中能夠替代 Flash、JS 等，提升頁(yè)面加載速度。眾所周知，Animation 有 8 大屬性...

    AJie 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<