vue组件雨滴、星星、流星特效动画（开箱即用）

雨滴、星星、流星动画

雨滴

<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 {name: "rain-component",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() * 250 + 1) + "px";item.style.left = Math.floor(Math.random() * 700 + 1) + "px";});},},
};
</script><style lang='less' scoped>
.rain {width: 700px;height: 250px;position: relative;background: radial-gradient(at 50% 0%,rgba(6, 55, 111, 1) 0%,rgba(11, 26, 57, 1) 70%);.rain-item {position: absolute;width: 2px;height: 30px;// background: skyblue;display: inline-block;// overflow: hidden;.line {animation: raining 2s infinite linear;position: absolute;content: "";top: -30px;left: 0;width: 100%;height: 100%;background: rgba(0, 183, 255, 0.7);}}
}
@keyframes raining {0% {top: -30px;opacity: 0;}50% {top: 0px;opacity: 1;}100% {top: 30px;opacity: 0;}
}
</style>

星星

<template><div class="star"><divv-for="(item,index) in starNumber":key="index"class="star-item"ref="star-item":style="`animationDelay:${index*100}ms;width:${w}px;height:${h}px;`"></div></div>
</template><script>
export default {name: "star-component",props: {starNumber: {type: Number,default: 0,},w: {type: Number,default: 0,},h: {type: Number,default: 0,},},mounted() {this.randomStar();},methods: {randomStar() {let starArr = this.$refs["star-item"];// console.log(starArr);starArr.forEach((item) => {// console.log(item.children);item.style.top = Math.floor(Math.random() * 250 + 1) + "px";item.style.left = Math.floor(Math.random() * 700 + 1) + "px";});},},
};
</script><style lang='less' scoped>
.star {width: 700px;height: 250px;position: relative;background: radial-gradient(at 0% 100%,rgba(9, 37, 61, 1) 20%,rgba(9, 31, 55, 1) 70%);.star-item {position: absolute;width: 4px;height: 4px;display: inline-block;animation: staring 2s infinite linear;background: rgba(2, 213, 255, 1);border-radius: 50%;}
}
@keyframes staring {0% {opacity: 0;}50% {opacity: 1;}100% {opacity: 0;}
}
</style>

流星

<template><div class="meteor" :style="`transform:rotate(${rotateDeg}deg)`"><div class="line" :style="`animationDelay:${delay}s;width:${w}px;height:${h}px;`"></div></div>
</template><script>
export default {name: "meteor-component",props: {delay: {type: Number,default: 0,},w: {type: Number,default: 0,},h: {type: Number,default: 0,},rotateDeg: {type: Number,default: 0,},},
};
</script><style lang='less' scoped>
.meteor {width: 2px;height: 200px;position: relative;// overflow: hidden;.line {animation: meteoring 6s infinite linear;position: absolute;width: 2px;height: 200px;background: linear-gradient(to top,rgb(2, 161, 195, 1),rgba(11, 36, 66, 0.1));border-radius: 2px;box-shadow: 0px 10px 20px 0px #02a1c3;opacity: 0;&::before {width: 2px;height: 2px;content: "";position: absolute;bottom: 0px;left: 0px;border-radius: 50%;background: #00d0ff;box-shadow: 0px 0px 12px 5px #00d0ff;}}
}
@keyframes meteoring {0% {opacity: 0;top: -250px;}25% {opacity: 0.5;top: 0px;}50% {opacity: 0.8;top: 250px;}75% {opacity: 1;top: 500px;}100% {opacity: 0;top: 750px;}
}
</style>

引用

            <div class="rain-bg"><rain-component :rainNumber="20" :rotateDeg="-10" :w="2" :h="20"></rain-component></div><div class="meteor-bg"><meteor-component :delay="0" :w="3" :h="200" :rotateDeg="40"></meteor-component></div><div class="meteor-bg2"><meteor-component :delay="2" :w="2" :h="100" :rotateDeg="30"></meteor-component></div><div class="star-bg"><star-component :starNumber="20" :w="4" :h="4"></star-component></div>

vue组件雨滴、星星、流星特效动画（开箱即用）相关推荐

html5+css3满天星星音乐背景动画特效(超炫酷)
css3满天星星音乐背景动画特效 css3属性绘制唯美的满天星星和audio MP3音乐结合背景动画特效. 作品介绍 1.网页作品简介方面 :css3属性绘制唯美的满天星星和audio MP3音乐结合 ...
【Vue】Vue全家桶（三）Vue组件通信+Vue组件插槽+动画与过渡+使用vue-cli解决Ajax跨域问题
1 Vue组件通信 1.1 组件间通信基本原则不要在子组件中直接修改父组件的状态数据数据在哪, 更新数据的行为(函数)就应该定义在哪 1.2 vue 组件间通信方式 props vue 的自定义事 ...
vue 引入canvas_canvas动画合集Vue组件
vue-canvas-effect canvas动画合集Vue组件 [? online demo](https://chenxuan0000.github.io/vue-canvas-effect/i ...
CSS实现公告栏文字跑马灯特效（VUE组件）
效果图 VUE组件封装 <template><div class="marquee" :style="{ backgroundColor: bgColo ...
vue组件库大全（忘了的时候可以进来找一下~）
基于Vue的组件库 https://github.com/ElemeFE/element" element 饿了么出品的Vue2的web UI工具套件 https://github.com/ ...
vue组件库介绍以及组件库Element UI 的使用
组件库前言这篇文章介绍vue组件库! 介绍什么是组件库以及Element UI组件库的使用! 看完不会你打我.哈哈哈,开玩笑的,不多说,上刺刀!! 1. 什么是 vue 组件库在实际开发中,前端 ...
vue 组件数据共享_Vue共享组件
vue 组件数据共享 As a company, we sell experiences on many different sales channels, gotui.com, musement.c ...
Vue 组件全家桶
Vue是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,这里对vue插件汇总,提供vue组件 ...
前端流星特效_前端工程师流星
前端流星特效 As part of my daily web browsing routine, I follow a number of front-end blogs. I'm always a ...

vue组件雨滴、星星、流星特效动画（开箱即用）

雨滴、星星、流星动画

vue组件雨滴、星星、流星特效动画（开箱即用）相关推荐

最新文章

热门文章