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

資訊專(zhuān)欄INFORMATION COLUMN

有趣的CSS彈跳動(dòng)畫(huà)

edgardeng / 2306人閱讀

摘要：舉一反三，我們也可以把角度反轉(zhuǎn)，就會(huì)往另外一邊彈跳。如果我們把動(dòng)畫(huà)里頭添加，就會(huì)變成線性的連續(xù)方式喔。

這是只用了一個(gè)div來(lái)做的小動(dòng)畫(huà)，純粹利用CSS3的animation來(lái)完成，就像是一個(gè)正方形在地上彈跳，碰到地面的時(shí)候尖角還會(huì)壓縮變圓，陰影的部分也會(huì)隨著正方形升高而縮小，至于到底該怎么完成呢？讓我們繼續(xù)看下去。

利用偽元素

由于只使用了一個(gè)div，要同時(shí)達(dá)到正方形旋轉(zhuǎn)與陰影縮放的效果，這里必須使用兩個(gè)偽元素（before與after）來(lái)完成，嚴(yán)格來(lái)說(shuō)，雖然只有一個(gè)div，但是卻是把這個(gè)div當(dāng)作外框，讓偽元素before作為旋轉(zhuǎn)的正方形，讓偽元素after作為陰影。

.box{
  position:relative;

}
.box:before{
  content:"";
  position:absolute;
  z-index:2;
  top:60px;
  left:50px;
  width:50px;
  height:50px;
  background:#c00;
  border-radius:2px;
  transform: rotate(45deg);
}
.box:after{
  content:"";
  position:absolute;
  z-index:1;
  top:128px;
  left:52px;
  width:44px;
  height:3px;
  background:#eaeaea;
  border-radius:100%;
}

CSS動(dòng)畫(huà)

畫(huà)出正方形與陰影之后，再來(lái)就是要做動(dòng)畫(huà)了，為了避免太過(guò)復(fù)雜，這里我們先不要旋轉(zhuǎn)，先單純讓正方形上下跳動(dòng)，然后陰影會(huì)放大縮小，下面的示例的動(dòng)畫(huà)，又新增了20%與80%的keyframe，目的是為了讓接觸的時(shí)候角落才會(huì)變圓，不然就會(huì)變成剛開(kāi)始移動(dòng)時(shí)尖角就變圓，就會(huì)很怪異了。

.box:before{
  content:"";
  position:absolute;
  z-index:2;
  top:60px;
  left:50px;
  width:50px;
  height:50px;
  background:#c00;
  border-radius:2px;
  transform: rotate(45deg);
  -webkit-animation:box .8s infinite ; 
}
@-webkit-keyframes box{
  0%{
    top:50px;
  }
  20%{
    border-radius:2px;  /*從20%的地方才開(kāi)始變形*/
  }
  50%{
    top:80px; 
    border-bottom-right-radius:25px;
  }
  80%{
    border-radius:2px;  /*到80%的地方恢復(fù)原狀*/
  }
  100%{
    top:50px;
  }
}
.box:after{
  content:"";
  position:absolute;
  z-index:1;
  top:128px;
  left:52px;
  width:44px;
  height:3px;
  background:#eaeaea;
  border-radius:100%;
  -webkit-animation:shadow .8s infinite ; 
}
@-webkit-keyframes shadow{
  0%,100%{
    left:54px;
    width:40px;
    background:#eaeaea;
  }
  50%{
    top:126px;
    left:50px;   /*讓陰影保持在原位*/
    width:50px;
    height:7px;
    background:#eee;
  }
}

加入旋轉(zhuǎn)效果

了解原理之后，我們只要再加上旋轉(zhuǎn)的屬性，就可以達(dá)到彈跳起來(lái)的時(shí)候有旋轉(zhuǎn)的效果，不過(guò)這里又有用到一個(gè)小技巧，就是落下的時(shí)候是90度轉(zhuǎn)到45度，彈上去的時(shí)候從45旋轉(zhuǎn)到0度，然后在這一瞬間從0度變成90度（100%到0%），如此一來(lái)我們就會(huì)產(chǎn)生錯(cuò)覺(jué)，感覺(jué)好像一直在旋轉(zhuǎn)了。

@-webkit-keyframes box{
  0%{
    top:50px;
    transform: rotate(90deg); /**/
  }
  20%{
    border-radius:2px;
  }
  50%{
    top:80px; 
    transform: rotate(45deg);
    border-bottom-right-radius:25px;
  }
  80%{
    border-radius:2px;
  }
  100%{
    top:50px;
    transform: rotate(0deg);
  }
}

舉一反三，我們也可以把角度反轉(zhuǎn)，就會(huì)往另外一邊彈跳。

如果我們把動(dòng)畫(huà)里頭添加linear，就會(huì)變成線性的連續(xù)方式喔。

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

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

相關(guān)文章

  • 有趣的CSS彈跳動(dòng)畫(huà)

    摘要：舉一反三，我們也可以把角度反轉(zhuǎn)，就會(huì)往另外一邊彈跳。如果我們把動(dòng)畫(huà)里頭添加，就會(huì)變成線性的連續(xù)方式喔。 這是只用了一個(gè)div來(lái)做的小動(dòng)畫(huà)，純粹利用CSS3的animation來(lái)完成，就像是一個(gè)正方形在地上彈跳，碰到地面的時(shí)候尖角還會(huì)壓縮變圓，陰影的部分也會(huì)隨著正方形升高而縮小，至于到底該怎么完成呢？讓我們繼續(xù)看下去。 利用偽元素 由于只使用了一個(gè)div，要同時(shí)達(dá)到正方形旋轉(zhuǎn)與陰影縮放的...

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

  • 【Hello CSS】第九章-如何畫(huà)一個(gè)體驗(yàn)更好的動(dòng)畫(huà)？

    摘要：那就是重力加速度的表現(xiàn)以及彈力球與空氣，地面所產(chǎn)生的摩擦力的表現(xiàn)。彈力球下落時(shí)，由于重力加速度的原因，所以速度會(huì)越來(lái)越大，往上跳時(shí)速度會(huì)越來(lái)越小直至。 作者：陳大魚(yú)頭 github： KRISACHAN 在上一節(jié)中， 不走心 地畫(huà)了一些 CSS圖案 ，本節(jié)就繼續(xù)不走心地 畫(huà)動(dòng)畫(huà) 。 CSS的動(dòng)畫(huà)屬性 在CSS中，animation 、 transition 跟 transform...

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

  • 推薦三兩款前端動(dòng)畫(huà)庫(kù)，anitmate.css, velocity-animate， anime,

    摘要：所以就說(shuō)說(shuō)吧優(yōu)點(diǎn)可自定義動(dòng)畫(huà)效果，支持隊(duì)列動(dòng)效支持回調(diào)函數(shù)支持動(dòng)畫(huà)的，等等功能缺點(diǎn)缺少自定義特效文檔比較少使用遇到的小問(wèn)題默認(rèn)不是勻速的，需要設(shè)置詳細(xì)整理待續(xù) 在最近一段時(shí)間的工作里，常常用到動(dòng)畫(huà)，我主要接觸了三個(gè) animate.cssanimevelocity 下面分析一下他們的優(yōu)缺點(diǎn) animate.css 優(yōu)點(diǎn)：animate.css主要是使用css實(shí)現(xiàn)動(dòng)畫(huà)效果，目前已經(jīng)有幾十...

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

  • 翻譯 | 深入理解CSS時(shí)序函數(shù)

    摘要：一條正在繪制中的三次方貝塞爾曲線因?yàn)樵撉€由四個(gè)點(diǎn)形成，我們將其稱(chēng)為三次方貝塞爾曲線，而不是二次方曲線三個(gè)點(diǎn)或四次方曲線五個(gè)點(diǎn)?，F(xiàn)在終于可以將貝塞爾曲線收入囊中了，也已經(jīng)對(duì)這 作者：Nicolas（滬江前端開(kāi)發(fā)工程師）本文原創(chuàng)翻譯，轉(zhuǎn)載請(qǐng)注明作者及出處。 各位，趕緊綁住自己并緊緊抓牢了，因?yàn)楫?dāng)你掌握了特別有趣但又復(fù)雜的CSS時(shí)序函數(shù)之后，你將會(huì)真正體驗(yàn)到豎起頭發(fā)般的興奮感受。 好吧，本...

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

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

0條評(píng)論

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