css3飘动的荷叶上下左右摇曳+不规则露珠水滴随着荷叶摇晃而移动

运用css3和html实现一个由荷叶的图片和css做的水滴摇曳真是仿真的动画

效果展示

css3飘动的荷叶上下左右摇曳+不规则露珠荷叶摇晃而晃动

核心代码

<div class="bottom-img">
     <div class="screenSaver-leftLeaf"><img src="@/assets/img/screenSaver_leftLeaf.png" alt="" ></div>
     <div class="dewdrop"></div>
</div>

<style lang="less" scoped>
    .bottom-img{
      position: relative;
      .screenSaver-leftLeaf{
        position: absolute;
        top: 0px;
        left:14%;
        animation: swaying 4s linear infinite;
      }
      @keyframes swaying{
        0% {transform: skewX(-10deg) rotate(-4deg);}
        50% {trans