欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS實(shí)現(xiàn)風(fēng)吹動(dòng)樹葉的動(dòng)畫效果

  發(fā)布時(shí)間：2024-01-05 16:38:02   作者：編程范兒   我要評(píng)論
這篇文章主要為大家詳細(xì)介紹了如何CSS實(shí)現(xiàn)簡單的風(fēng)吹動(dòng)樹葉的動(dòng)畫效果，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

如題，要實(shí)現(xiàn)樹葉在風(fēng)中搖擺的動(dòng)畫，首先準(zhǔn)備主體：樹葉。

這里準(zhǔn)備了兩張矢量的高清版 SVG 格式的不同種類的樹葉。

首先我們使用 img 標(biāo)簽來在網(wǎng)頁中顯示樹葉，然后給它一個(gè)名為 leaf 的類，好給它附加樣式。

<img class="leaf" src="/blog/virtual_safari_leaf.svg" alt="Leaf" />

接下來就是編寫 CSS 動(dòng)畫代碼，這里利用了 tranform 屬性中的兩個(gè)變換，skew 將元素在二維平面上傾斜角度進(jìn)行拉伸，rotate 以中心為坐標(biāo)軸進(jìn)行旋轉(zhuǎn)。

.leaf {
  transform: scale(0.8);
  animation: leftRuffle 3s infinite alternate;
}
@keyframes leftRuffle {
  50% {
    transform: scale(0.8) skew(5deg) rotate(-5deg);
  }
  100% {
    transform: scale(0.8) skew(0) rotate(0);
  }
}

我們先讓第一個(gè)樹葉動(dòng)起來

第二個(gè)樹葉我們將它左右翻轉(zhuǎn)下，利用 scaleX(-1)，然后同理

.leaf {
  transform: scale(0.7) scaleX(-1);
  animation: rightRuffle 3s infinite alternate;
}
@keyframes rightRuffle {
  0% {
    transform: scale(0.7) scalex(-1) skew(0) rotate(0);
  }
  50% {
    transform: scale(0.7) scalex(-1) skew(5deg) rotate(-5deg);
  }
  100% {
    transform: scale(0.7) scalex(-1) skew(0) rotate(0);
  }
}

動(dòng)是動(dòng)起來了，可單獨(dú)看是否覺得有點(diǎn)奇怪。

我們給它增加一個(gè)場景：

通常這種大樹葉的綠植要么生長在熱帶雨林，要么被我們放在室內(nèi)當(dāng)做風(fēng)景或者背景。

以上就是CSS實(shí)現(xiàn)風(fēng)吹動(dòng)樹葉的動(dòng)畫效果的詳細(xì)內(nèi)容，更多關(guān)于CSS動(dòng)畫的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

  • 簡單的css文字動(dòng)畫效果

    這篇文章主要介紹了css文字動(dòng)畫效果如何實(shí)現(xiàn)，幫助大家更好的理解和學(xué)習(xí)使用css，感興趣的朋友可以了解下
    2021-04-06

  • CSS巧用漸變實(shí)現(xiàn)高級(jí)感背景光動(dòng)畫

    本文主要介紹了利用CSS中的conic-gradient()以及box-shadow模擬出光源陰影效果，從而實(shí)現(xiàn)一個(gè)充滿高級(jí)感的背景光動(dòng)畫，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2021-11-30

  • 純CSS打字動(dòng)畫的實(shí)現(xiàn)示例

    本文主要介紹了純CSS打字動(dòng)畫的實(shí)現(xiàn)示例，逐個(gè)顯示一段文本中的字符，模擬出一種打字的效果，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)
    2022-07-25

  • 基于css實(shí)現(xiàn)炫酷按鈕動(dòng)畫效果案例代碼

    按鈕在開發(fā)中使用的頻率非常的高，ui 框架中的按鈕組件也都是層出不窮，今天教大家僅用 css 實(shí)現(xiàn)一些非常炫酷的按鈕效果，感興趣的朋友跟隨小編一起學(xué)習(xí)吧
    2023-02-28

  • 純CSS實(shí)現(xiàn)了下劃線的交互動(dòng)畫效果

    本文主要介紹了純CSS實(shí)現(xiàn)了下劃線的交互動(dòng)畫效果，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)
    2023-03-06

  • 使用css實(shí)現(xiàn)水波加載動(dòng)畫效果

    這篇文章主要介紹了使用css實(shí)現(xiàn)水波加載動(dòng)畫效果,技術(shù)上只用到了css+html，還是非常容易學(xué)習(xí)的，做出來的效果也很不錯(cuò),需要的朋友可以參考下
    2023-04-23

  • 使用CSS實(shí)現(xiàn)按鈕邊緣跑馬燈動(dòng)畫

    這篇文章主要介紹了使用CSS實(shí)現(xiàn)按鈕邊緣跑馬燈動(dòng)畫,技術(shù)上只使用了css+html,還是非常容易學(xué)習(xí)的，文中提供了詳細(xì)的代碼,需要的朋友可以參考下
    2023-04-28

  • CSS實(shí)現(xiàn)鼠標(biāo)懸浮動(dòng)畫特效

    Css(層疊樣式表)是種格式化網(wǎng)頁的標(biāo)準(zhǔn)方式，用于控制設(shè)置網(wǎng)頁的樣式，并且允許CSS樣式信息與網(wǎng)頁內(nèi)容(由HTML語言定義)分離的一種技術(shù),使用css可以制作各種好看的動(dòng)畫特效,
    2023-05-04

  • 使用CSS還原拉斯維加斯球數(shù)字動(dòng)畫效果

    最近大家刷抖音，是否有刷到拉斯維加斯的新地標(biāo) 「Sphere」，場館內(nèi)部的視覺效果非常驚人，我的第一想法就是，這個(gè)看起來用 CSS 也可以實(shí)現(xiàn)嘛？還有 CSS 不能實(shí)現(xiàn)的？本文
    2023-10-20

最新評(píng)論