亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS實現(xiàn)風吹動樹葉的動畫效果

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

如題，要實現(xiàn)樹葉在風中搖擺的動畫，首先準備主體：樹葉。

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

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

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

接下來就是編寫 CSS 動畫代碼，這里利用了 tranform 屬性中的兩個變換，skew 將元素在二維平面上傾斜角度進行拉伸，rotate 以中心為坐標軸進行旋轉(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);
  }
}

我們先讓第一個樹葉動起來

第二個樹葉我們將它左右翻轉(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);
  }
}

動是動起來了，可單獨看是否覺得有點奇怪。

我們給它增加一個場景：

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

以上就是CSS實現(xiàn)風吹動樹葉的動畫效果的詳細內(nèi)容，更多關于CSS動畫的資料請關注腳本之家其它相關文章！

相關文章

  • 簡單的css文字動畫效果

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

  • CSS巧用漸變實現(xiàn)高級感背景光動畫

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

  • 純CSS打字動畫的實現(xiàn)示例

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

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

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

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

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

  • 使用css實現(xiàn)水波加載動畫效果

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

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

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

  • CSS實現(xiàn)鼠標懸浮動畫特效

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

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

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

最新評論