vue页面特效：雨滴、流星

组件引用：

  <rain  :rainNumber="20" :rotateDeg="40" :w="1" :h="140"></rain>

 rotateDeg：代表方向，w代表宽，h代表长度      具体的代码如下封装

效果：

封装一个组件：

<template><div class="rain"><divv-for="(item,index) in rainNumber":key="index"class="rain-item"ref="rain-item":style="`transform:rotate(${rotateDeg}deg);width:${w}px;height:${h}px;`"><div class="line" :style="`animationDelay:${index*100}ms`"></div></div></div>
</template><script>
export default {props: {rainNumber: {type: Number,default: 0,},rotateDeg: {type: Number,default: 0,},w: {type: Number,default: 0,},h: {type: Number,default: 0,},},mounted() {this.randomRain();},methods: {randomRain() {let rainArr = this.$refs["rain-item"];// console.log(rainArr);rainArr.forEach((item) => {// console.log(item.children);item.style.top = Math.floor(Math.random() * 0 + 1) + "px";item.style.left = Math.floor(Math.random() * 2000 + 1) + "px";});},},
};
</script><style lang='less' scoped>
.rain {width: 100%;height: 100vh;position: relative;.rain-item {position: absolute;width: 2px;height: 30px;display: inline-block;.line {animation: raining 2s infinite linear;position: absolute;content: "";top: -30px;left: 0;width: 100%;height: 100%;box-shadow: 0px 5px 20px 0px #fcfcfc;background: linear-gradient(to top,rgb(249, 249, 249),rgba(11, 36, 66, 0.1));}}
}
@keyframes raining {0% {top: -0;opacity: 0;}10% {top: 10;opacity: 0.5;}25% {top: 200;opacity: 0.5;}50% {top: 400px;opacity: 1;}75% {top: 600px;opacity: 0.5;}100% {top: 800px;opacity: 0;}
}
</style>

vue页面特效：雨滴、流星相关推荐

vue动画特效-渐变动画和@keyframes
vue动画特效-渐变动画和@keyframes 过渡原理实现 @keyframes动画使用animated.css 同时使用过渡和@keyframes动画动画时长的问题今天学习vue的动画的 ...
php加载外部html,VUE页面加载外部HTML实例详解
前后端分离,后端提供了接口.但有一部分数据,比较产品说明文件,是存在其他的服务器上的.所以,在页面显示的时候,如果以页面内嵌的形式显示这个说明文件.需要搞点事情以达到想要的效果.本文主要和大家介绍了V ...
vue 页面闪烁的问题_vue页面加载闪烁问题的解决方法
v-if 和 v-show 的区别 v-if只会在满足条件时才会编译,而v-show不管是否满足条件始终会编译,v-show的显示与隐藏只是简单的切换CSS的display属性. 也就是说,在使用v- ...
vue页面跳转后返回原页面初始位置
vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的 ...
SAP Cloud Application Programming bookshop 例子 Vue页面不能正常显示的原因分析
我在本地用cds run 命令启动 SAP Cloud Application Programming 应用后,访问如下 url: http://localhost:4004/vue/index.ht ...
Vue页面骨架屏（一）
在开发webapp的时候总是会受到首屏加载时间过长的影响,主流的解决方法是在载入完成之前显示loading图效果,而一些大公司会配置一套服务端渲染的架构来解决这个问题.考虑到ssr所要解决的一系列问题 ...
Vue 页面如何利用生命周期函数监听用户预览时长
最近的业务中涉及到这样一个需求,在线培训的系统需要知道用户对某个在线预览的页面追踪用户的预览时长.初步我们首先想到借助 Vue 页面的生命周期函数 mounted 和 destroyed,分别在其中加 ...
Vue 页面如何监听用户预览时间
最近的业务中涉及到这样一个需求,在线培训的系统需要知道用户对某个在线预览的页面追踪用户的预览时长.初步我们首先想到借助 Vue 页面的生命周期函数 mounted 和 destroyed,分别在其中加 ...
Vue页面跳转后不显示问题
Vue页面跳转后不显示问题必须要添加 path前面要有/

vue页面特效：雨滴、流星

vue页面特效：雨滴、流星相关推荐

最新文章

热门文章