前端实现落雨+涟漪效果

最新推荐文章于 2024-01-15 17:57:58 发布
最新推荐文章于 2024-01-15 17:57:58 发布
阅读量455 收藏 1
点赞数 1
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bxy_123456789/article/details/131010847
版权

话不多说，先看视频，满足所需再往下撸代码（以下代码均基于vue3）

rain

如果也有类似的需求，请往下看：

此效果由两部分组成，落雨+涟漪

雨滴的样式其实是宽1像素，高度不同的白色长方块，下落的动画都是相同的，通过改变长方块的高度，透明度以及动画发生的时间呈现出参差不齐的效果，从而达成落雨的效果，详见下方代码

 <template>
 <div
      v-for="(i, k) in rainData"
      :key="k"
      class="raindrop"
      :style="{
        left: i.left + '%',
        animationDelay: i.time + 's',
        height: i.height + 'px',
        opacity: i.opacity + '%',
        top: '-' + i.rainTop + 'px',
      }"
    ></div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue'
export default defineComponent({
  setup() {
    const rainData = ref([])
    onMounted(() => {
      let arr = []
      for (let i = 0; i < 30; i++) {
        let left = Math.floor(Math.random() * (100 - 1))
        let time = Math.random()
        let rainTop = Math.floor(Math.random() * (150 - 100)) + 100
        let height = Math.floor(Math.random() * (100 - 5)) + 5
        let opacity = Math.floor(Math.random() * (60 - 40)) + 40
        let top = Math.floor(Math.random() * (90 - 47)) + 47
        arr.push({ left, time, height, opacity, rainTop, top })
      }
      rainData.value = arr
    })
    return { rainData}
  },
})
</script>

<style lang="scss" scoped>
.raindrop {
  display: inline-block;
  position: absolute;
  width: 1px;
  background: #ffffff;
  border-radius: 5000px;
  transform: rotateY(45deg);
  animation: raindrop 1s infinite;
}
@keyframes raindrop {
  0% {
    top: 5%;
  }

  10% {
    top: 10%;
  }

  20% {
    top: 20%;
  }

  30% {
    top: 30%;
  }

  40% {
    top: 40%;
  }

  50% {
    top: 50%;
  }

  60% {
    top: 60%;
  }

  70% {
    top: 70%;
  }

  80% {
    top: 75%;
  }

  90% {
    top: 80%;
  }

  100% {
    top: 85%;
  }
}
</style>

涟漪的效果是由若干个同心椭圆形放大消失的动画构成，消失的动画就是一边放大这些椭圆一边改变其的透明度，椭圆的样式详见以下代码：

<template>
<div
      v-for="(i, k) in ripplePosition"
      :key="k"
      class="ripple"
      :style="{
        left: i.left + 'px',
        top: i.top + 'px',
      }"
    >
      <div class="ripple-circle ripple-circle-item1"></div>
      <div class="ripple-circle ripple-circle-item2"></div>
      <div class="ripple-circle ripple-circle-item3"></div>
    </div>
</template>

<script>
import { defineComponent, ref} from 'vue'
export default defineComponent({
  setup() {
    const ripplePosition = ref([
      { top: '380', left: '170' },
      { top: '275', left: '10' },
      { top: '300', left: '325' },
      { top: '450', left: '300' },
      { top: '480', left: '50' },
      { top: '580', left: '200' },
    ])
   
    return { ripplePosition }
  },
})
</script>

<style lang="scss" scoped>
.ripple {
  position: relative;
  top: 450px;
  left: 300px;
}

.ripple-circle {
  display: inline-block;
  position: absolute;
  border: 1px solid #fff;
  border-radius: 50%;
  transform: rotateX(72deg);
  animation: ripple 1.2s infinite;

  &-item1 {
    width: 30px;
    height: 30px;
    top: 20px;
    left: 20px;
  }

  &-item2 {
    width: 50px;
    height: 50px;
    top: 10px;
    left: 10px;
  }

  &-item3 {
    width: 70px;
    height: 70px;
    top: 0;
    left: 0;
    animation: ripple 1.2s 0.8s infinite;
  }
}
@keyframes ripple {
  0% {
    transform: scale(0.6) rotateX(72deg);
    opacity: 1;
  }

  10% {
    transform: scale(0.8) rotateX(72deg);
    opacity: 0.9;
  }

  20% {
    transform: scale(0.9) rotateX(72deg);
    opacity: 0.8;
  }

  30% {
    transform: scale(1.2) rotateX(72deg);
    opacity: 0.7;
  }

  40% {
    transform: scale(1.3) rotateX(72deg);
    opacity: 0.6;
  }

  50% {
    transform: scale(1.5) rotateX(72deg);
    opacity: 0.5;
  }

  60% {
    transform: scale(1.6) rotateX(72deg);
    opacity: 0.4;
  }

  70% {
    transform: scale(1.8) rotateX(72deg);
    opacity: 0.3;
  }

  80% {
    transform: scale(1.9) rotateX(72deg);
    opacity: 0.2;
  }

  90% {
    transform: scale(2) rotateX(72deg);
    opacity: 0.1;
  }

  100% {
    transform: scale(2.1) rotateX(72deg);
    opacity: 0;
  }
}
</style>

最后附上完整代码:

<template>
  <div class="rain-box">
    <div
      v-for="(i, k) in rainData"
      :key="k"
      class="raindrop"
      :style="{
        left: i.left + '%',
        animationDelay: i.time + 's',
        height: i.height + 'px',
        opacity: i.opacity + '%',
        top: '-' + i.rainTop + 'px',
      }"
    ></div>
    <div
      v-for="(i, k) in ripplePosition"
      :key="k"
      class="ripple"
      :style="{
        left: i.left + 'px',
        top: i.top + 'px',
      }"
    >
      <div class="ripple-circle ripple-circle-item1"></div>
      <div class="ripple-circle ripple-circle-item2"></div>
      <div class="ripple-circle ripple-circle-item3"></div>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue'
export default defineComponent({
  setup() {
    const rainData = ref([])
    const ripplePosition = ref([
      { top: '380', left: '170' },
      { top: '275', left: '10' },
      { top: '300', left: '325' },
      { top: '450', left: '300' },
      { top: '480', left: '50' },
      { top: '580', left: '200' },
    ])
    onMounted(() => {
      let arr = []
      for (let i = 0; i < 30; i++) {
        let left = Math.floor(Math.random() * (100 - 1))
        let time = Math.random()
        let rainTop = Math.floor(Math.random() * (150 - 100)) + 100
        let height = Math.floor(Math.random() * (100 - 5)) + 5
        let opacity = Math.floor(Math.random() * (60 - 40)) + 40
        let top = Math.floor(Math.random() * (90 - 47)) + 47
        arr.push({ left, time, height, opacity, rainTop, top })
      }
      rainData.value = arr
    })
    return { rainData, ripplePosition }
  },
})
</script>

<style lang="scss" scoped>
@import '~@/styles/vars';

.rain-box {
  width: 100%;
  min-height: 100vh;
  background: #3BD3D3;
  overflow: hidden;
}

.raindrop {
  display: inline-block;
  position: absolute;
  width: 1px;
  background: #fff;
  border-radius: 5000px;
  transform: rotateY(45deg);
  animation: raindrop 1s infinite;
}
@keyframes raindrop {
  0% {
    top: 5%;
  }

  10% {
    top: 10%;
  }

  20% {
    top: 20%;
  }

  30% {
    top: 30%;
  }

  40% {
    top: 40%;
  }

  50% {
    top: 50%;
  }

  60% {
    top: 60%;
  }

  70% {
    top: 70%;
  }

  80% {
    top: 75%;
  }

  90% {
    top: 80%;
  }

  100% {
    top: 85%;
  }
}

.ripple {
  position: relative;
  top: 450px;
  left: 300px;
}

.ripple-circle {
  display: inline-block;
  position: absolute;
  border: 1px solid #fff;
  border-radius: 50%;
  transform: rotateX(72deg);
  animation: ripple 1.2s infinite;

  &-item1 {
    width: 30px;
    height: 30px;
    top: 20px;
    left: 20px;
  }

  &-item2 {
    width: 50px;
    height: 50px;
    top: 10px;
    left: 10px;
  }

  &-item3 {
    width: 70px;
    height: 70px;
    top: 0;
    left: 0;
    animation: ripple 1.2s 0.8s infinite;
  }
}
@keyframes ripple {
  0% {
    transform: scale(0.6) rotateX(72deg);
    opacity: 1;
  }

  10% {
    transform: scale(0.8) rotateX(72deg);
    opacity: 0.9;
  }

  20% {
    transform: scale(0.9) rotateX(72deg);
    opacity: 0.8;
  }

  30% {
    transform: scale(1.2) rotateX(72deg);
    opacity: 0.7;
  }

  40% {
    transform: scale(1.3) rotateX(72deg);
    opacity: 0.6;
  }

  50% {
    transform: scale(1.5) rotateX(72deg);
    opacity: 0.5;
  }

  60% {
    transform: scale(1.6) rotateX(72deg);
    opacity: 0.4;
  }

  70% {
    transform: scale(1.8) rotateX(72deg);
    opacity: 0.3;
  }

  80% {
    transform: scale(1.9) rotateX(72deg);
    opacity: 0.2;
  }

  90% {
    transform: scale(2) rotateX(72deg);
    opacity: 0.1;
  }

  100% {
    transform: scale(2.1) rotateX(72deg);
    opacity: 0;
  }
}
</style>

嘟嘟小码农
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
前端日历样式，以及选中当前日
04-03
通过算法的方式，获取到当前月的所有日期并且选中当前月的日期 通过showDate（）方法拼接当前月的日期 通过LoadTime（）初始化当前展示的日期 注意一点，日期格式需要转化成date（）类型 var mydate=new Date(Date....
c++代码实现单链表逆置输出
06-05
c++代码实现单链表逆置输出c++代码实现单链表逆置输出c++代码实现单链表逆置输出c++代码实现单链表逆置输出c++代码实现单链表逆置输出c++代码实现单链表逆置输出c++代码实现单链表逆置输出c++代码实现单链表逆置输出...
前端特效（5）--涟漪
qq_43722072的博客
02-20 354
利用jquery和Velocity实现随机涟漪的效果 主要知识点： 要使用Velocity首先要引入它，如果想与JQ配合使用注意要先引入JQ再引入Velocity Velocity 接收一个或更多的参数，只有第一个参数是是强制要求的，它可以是一个命令（如"scroll"），或者是由CSS属性值组成的对象（这些值是动画的目标值）；第二个参数是由动画附加选项组成的对象，比如过渡时长，张弛度，延时还有...
Web前端学习笔记（十三）---水波纹涟漪效果
海到无边天作岸 山登绝顶我为峰
09-13 2814
Demo展示 源代码 index.html <!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>编译中梦见未来</title> <link rel
在vue中使用canvas实现简单特效（下雨天）
weixin_44037364的博客
12-15 2809
效果展示 还不了解canvas的同学可以先看一下官方的api https://www.canvasapi.cn 话不多说直接上代码 在页面中添加canvas标签 <template> <div class="home"> <canvas id="canvas" /> </div> </template> 初始化canvas initCanvas() { const canvas = document.querySel
three.js精灵模型-下雨场景效果模拟
qq_54224923的博客
09-27 858
three.js 精灵模型
前端--canvas实现漂亮的下雨效果
fumushan的博客
11-30 1658
说明 这篇文章说如何用canvas画出漂亮的下雨效果，先看看最后实现的效果吧。  效果图  解释 看图来分析下，我们需要实现哪些效果。  1、雨滴下落效果，移动鼠标控制下落方向  2、雨滴下落散成小水珠，小水珠的移动方向和鼠标移动方向相同  3、雨滴下落到鼠标坐标一定范围内，散成小水珠，同样的，小水珠的移动方向也和鼠标移动方向相同 好的，我们把整个效果大致拆分成三个效果，实现这三个效果，...
html计数器功能实现包括css页面
06-05
html计数器功能实现包括css页面html计数器功能实现包括css页面html计数器功能实现包括css页面html计数器功能实现包括css页面html计数器功能实现包括css页面html计数器功能实现包括css页面html计数器功能实现包括css...
flex中文帮助文档+中文教程
03-17
flex中文帮助文档+中文教程 flex中文帮助文档+中文教程
java WriteHDFS实现，hadoop应用
06-05
java WriteHDFS实现，hadoop应用java WriteHDFS实现，hadoop应用java WriteHDFS实现，hadoop应用java WriteHDFS实现，hadoop应用java WriteHDFS实现，hadoop应用java WriteHDFS实现，hadoop应用java WriteHDFS实现，...
CSS实现雨滴动画效果的实例代码
01-19
玻璃窗 今天我们要实现的是雨滴效果，不过实现雨滴前，我们先把毛玻璃的效果弄出来，没有玻璃窗，雨都进屋了，还有啥好敲打的。 <div class='window'></div> .window { position: absolute; width: 100vw; height: 100vh; background: url(https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg); back
基于Canvas的jQuery水波涟漪插件
12-12
jquery.ripple.js是一款小巧的基于HTML5 Canvas的水波涟漪jQuery插件。该插件可以在一张图片上，通过鼠标点击制作出逼真的水波涟漪效果。
基于JavaScript+css写一个简单的h5动态下雨效果
小淼淼的博客
09-16 414
基于JavaScript+css写一个简单的h5动态下雨效果。 小胖，你知道吗，我好喜欢下小雨的感觉哎~
用threejs + vue3 写持续下雨效果
hyy的博客
11-29 685
threejs + vue3 写持续下雨效果
HTML使用canvas画布实现涟漪效果
weixin_51445423的博客
04-16 685
HTMLcanvas画布实现涟漪效果
毕业季，作为程序员（it软件开发工程师），如何培养强大的解决问题的能力
南北极之间
08-12 1814
例如，如果一个孩子试图弄清楚如何打开一个玩具盒，他或她可能会尝试各种方法（例如，拉，推，举），直到找到正确的方法。良好的解决问题的能力包括能够创造性地和分析性地思考，将问题分解成更小的部分，并使用系统的方法找到解决方案。递归涉及将问题分解为较小的子问题，解决每个子问题，然后将子问题的解决方案组合在一起以解决更大的问题。另一个常见的例子是使用算法，例如快速排序算法，它将问题分解成更小的部分，解决每个部分，然后将解决方案组合到各个部分以解决更大的问题。如果你想成功，你需要有很强的解决问题的能力。........
【flash】利用flash中的函数duplicateMovieClip（），setProperty（）制作下雨场景
wwwcaifeng的博客
04-06 383
/ 后面一个参数x为新复制的影片剪辑的深度级别，在这里依次为1、2、3、4、5。在同一时间线上，每一个新复制的影片剪辑占用一个唯一的深度级别，并层层堆叠，如果后复制出的影片剪辑与前面复制出的影片剪辑深度级别相同就会覆盖并替换掉前一个影片剪辑，所以必须为每一个新复制的影片剪辑分配一个唯一的深度级别。//"rain"+i 为新复制的影片剪辑的唯一标识符，这个标识符是由字符串"rain"连接上通过运算取得的i的值得来的，即新复制出的影片剪辑名称依次为rain1、rain2、……//深度级别，可以理解为时间点。
记录一下 vue 实现代码雨效果
最新发布
weixin_59038724的博客
01-15 450
【代码】记录一下 vue 实现代码雨效果。
vue3实现下雨效果，并清空定时器
weixin_70243424的博客
05-28 266
【代码】vue3实现下雨效果，并清空定时器。
求1+2-3+4-5…200的和
04-06
这是一个等差数列，首项为1，公差为-2（每一项都比前一项少2），共有100项（从1到200一共有100个数）。 根据等差数列求和公式，可得： $S_n=\frac{n}{2}[2a_1+(n-1)d]$ 其中，$S_n$表示前$n$项的和，$a_1$表示首...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值