011:vue结合css动画animation实现下雪效果

这篇具有很好参考价值的文章主要介绍了011:vue结合css动画animation实现下雪效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1. 实现效果

GIF录屏文件太卡有点卡,实际是很丝滑的

animation动画和vue3相结合,# vue2/vue3 常用示例专栏,vue.js,css,前端,scss,animation文章来源地址https://www.toymoban.com/news/detail-806448.html

2. 编写一个下雪效果组件 VabSnow.vue

  1. src 下新建 components 文件,创建VabSnow.vue组件文件
<template>
  <div class="content" :style="styleObj">
    <div v-for="(item, index) in 200" :key="index" class="snow"></div>
  </div>
</template>

<script>
  export default {
    name: 'VabSnow',
    props: {
      styleObj: {
        type: Object,
        default: () => {
          return {}
        },
      },
    },
    data() {
      return {}
    },
    created() {},
    mounted() {},
    methods: {},
  }
</script>

<style lang="scss" scoped>
  .content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
    filter: drop-shadow(0 0 10px white);
  }

  @function random_range($min, $max) {
    $rand: random();
    $random_range: $min + floor($rand * (($max - $min) + 1));

    @return $random_range;
  }

  .snow {
    $total: 200;
    position: absolute;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;

    @for $i from 1 through $total {
      $random-x: random(1000000) * 0.0001vw;
      $random-offset: random_range(-100000, 100000) * 0.0001vw;
      $random-x-end: $random-x + $random-offset;
      $random-x-end-yoyo: $random-x + ($random-offset / 2);
      $random-yoyo-time: random_range(30000, 80000) / 100000;
      $random-yoyo-y: $random-yoyo-time * 100vh;
      $random-scale: random(10000) * 0.0001;
      $fall-duration: random_range(10, 30) * 1s;
      $fall-delay: random(30) * -1s;

      &:nth-child(#{$i}) {
        opacity: random(10000) * 0.0001;
        transform: translate($random-x, -10px) scale($random-scale);
        animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
      }

      @keyframes fall-#{$i} {
        #{percentage($random-yoyo-time)} {
          transform: translate($random-x-end, $random-yoyo-y) scale($random-scale);
        }

        to {
          transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);
        }
      }
    }
  }
</style>

3. 页面使用

<template>
  <div class="home">
    <div class="body">
      <VabSnow />
    </div>
  </div>
</template>

<script>
  import VabSnow from '@/components/VabSnow' //引入组件
  export default {
    name: 'Demo',
    components: {
      VabSnow,
    },
  }
</script>

<style scoped lang="scss">
  .home {
    .body {
      width: 890px;
      height: 500px;
      border: #030303 solid 10px;
      box-sizing: border-box;
      box-sizing: border-box;
    }
  }
</style>

4. 注意点

  1. 没啥注意的,主要是scss的变量操作及css动画 😎

到了这里,关于011:vue结合css动画animation实现下雪效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue 中通用的 css 列表入场动画效果

      css 代码  封装的列表组件,我是直接循环列表组件的,并且加了一个index 属性 直接传递给子组件的第一个 元素上   这样就能实现列表一项接一项进入的效果动画了 

    2024年02月15日
    浏览(38)
  • Unity Animation -- 改进动画效果

          在上一篇笔记中(Unity Animation -- Overview_亦枫Leonlew的博客-CSDN博客),我们制作了简单的小球弹跳的动画,但这个动画看起来很不自然,小球的弹跳看起来就像是不受重力影响的物体,没有加速度的影响。要让小球的弹跳动画看起来更自然(不使用物理引擎,只使用动画

    2023年04月12日
    浏览(78)
  • 基于css实现动画效果

            本文将会基于css,实现各种动画效果,接下来会从简单几个例子入手。 效果 效果展示

    2024年01月23日
    浏览(54)
  • animate.css 动画

    Animate.css | A cross-browser library of CSS animations. class=\\\"animate__bounce\\\" 1.    bounce             弹跳 2.    flash              闪烁 3.    pulse              放大,缩小 4.    rubberBand         放大,缩小,弹簧 5.    shake              左右晃动 6.    headShake          左右小幅

    2024年02月11日
    浏览(40)
  • css的animation动画

    创建动画序列,需要使用 animation 属性或其子属性,该属性允许配置动画时间、时长以及其他动画细节,但该属性不能配置动画的实际表现,动画的实际表现是由 @keyframes 规则实现 属性 描述 animation-name 指定由 @keyframes 描述的关键帧名称 animation-duration 设置动画一个周期的时长

    2024年02月06日
    浏览(82)
  • CSS3实现动画加载效果

    2024年02月07日
    浏览(54)
  • css动画(animation)常用属性

                               1.animation-name:动画名称                                       2.@keyframes:动画定义,后面跟动画名称                                      3.animation-duration:动画持续时长,单位(s)                         

    2023年04月27日
    浏览(48)
  • CSS animation动画使用详解

    目录 一、animation动画的使用步骤 第一步:定义动画 第二步:使用动画 二、animation的复合属性 三、animation的拆分属性 四、动画属性 animation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时的状态 逐帧动画(配合精灵图使用) animation-timing-function:step(N) N为将动

    2024年02月16日
    浏览(39)
  • CSS中animation动画-详解

    1、animation有什么组成? Animations由两部分组成:css动画的配置,以及一系列的keyframes(用来描述动画的开始、过程、结束状态)。不需要了解任何Js技术即可完成动画的制作 2、关键帧应该怎么表示? 0%表示动画的初始时间,也可以通过from表示。100%表示动画的结束时间

    2024年02月01日
    浏览(32)
  • css有哪些动画效果怎么实现的

     css常见的动画效果:平移,缩放,旋转 css实现动画主要有三种方式: transition实现渐变动画 transform实现缩放平移效果动画 animation实现自定义动画   transition实现渐变动画 transform实现缩放平移效果动画  animation实现自定义动画  属性 描述 属性值 animation-name 动画名称 animat

    2024年02月09日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包