<!--
|
* @Description: 流星雨动画
|
* @Author: 王旭
|
* @Date: 2022-03-23 17:00:30
|
* @LastEditTime: 2022-03-23 17:56:23
|
* @LastEditors: 王旭
|
-->
|
<template>
|
<div class="container">
|
<div class="meteor"></div>
|
<div class="meteor"></div>
|
<div class="meteor"></div>
|
<div class="meteor"></div>
|
<div class="meteor"></div>
|
<div class="meteor"></div>
|
<div class="meteor"></div>
|
<div class="meteor"></div>
|
<div class="meteor"></div>
|
<div class="meteor"></div>
|
<div class="meteor"></div>
|
<div class="meteor"></div>
|
<div class="meteor"></div>
|
<div class="meteor"></div>
|
<div class="meteor"></div>
|
<div class="meteor"></div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {},
|
data() {
|
//这里存放数据
|
return {};
|
},
|
//方法集合
|
methods: {},
|
created() {},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.container {
|
position: relative;
|
width: 100%;
|
height: 100%;
|
-webkit-transform: rotate(180deg);
|
transform: rotateZ(180deg);
|
}
|
|
.meteor {
|
position: absolute;
|
left: 20%;
|
top: 0;
|
width: 2px;
|
background: linear-gradient(
|
-45deg,
|
rgba(255, 255, 255, 0.4),
|
rgba(0, 0, 255, 0)
|
);
|
border-radius: 999px;
|
-webkit-filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
|
filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
|
-webkit-animation: tail 3000ms ease-in-out infinite,
|
shooting 3000ms ease-in-out infinite;
|
animation: tail 3000ms ease-in-out infinite,
|
shooting 3000ms ease-in-out infinite;
|
}
|
|
/* 1 */
|
.meteor:nth-child(1) {
|
top: 80%;
|
left: 30%;
|
-webkit-animation-delay: 8888ms;
|
animation-delay: 8888ms;
|
}
|
|
.meteor:nth-child(1)::before,
|
.meteor:nth-child(1)::after,
|
.meteor:nth-child(1)::after {
|
-webkit-animation-delay: 8888ms;
|
animation-delay: 8888ms;
|
}
|
|
/* 2 */
|
.meteor:nth-child(2) {
|
top: 80%;
|
left: 35%;
|
-webkit-animation-delay: 9288ms;
|
animation-delay: 9288ms;
|
}
|
|
.meteor:nth-child(2)::before,
|
.meteor:nth-child(2)::after,
|
.meteor:nth-child(2)::after {
|
-webkit-animation-delay: 9288ms;
|
animation-delay: 9288ms;
|
}
|
|
.meteor:nth-child(3) {
|
top: 90%;
|
left: 40%;
|
-webkit-animation-delay: 8600ms;
|
animation-delay: 8600ms;
|
}
|
|
.meteor:nth-child(3)::before,
|
.meteor:nth-child(3)::after,
|
.meteor:nth-child(3)::after {
|
-webkit-animation-delay: 8600ms;
|
animation-delay: 8600ms;
|
}
|
|
.meteor:nth-child(4) {
|
top: 50%;
|
left: 45%;
|
-webkit-animation-delay: 3288ms;
|
animation-delay: 3288ms;
|
}
|
|
.meteor:nth-child(4)::before,
|
.meteor:nth-child(4)::after,
|
.meteor:nth-child(4)::after {
|
-webkit-animation-delay: 3288ms;
|
animation-delay: 3288ms;
|
}
|
|
.meteor:nth-child(5) {
|
top: 50%;
|
left: 50%;
|
-webkit-animation-delay: 5588ms;
|
animation-delay: 5588ms;
|
}
|
|
.meteor:nth-child(5)::before,
|
.meteor:nth-child(5)::after,
|
.meteor:nth-child(5)::after {
|
-webkit-animation-delay: 5588ms;
|
animation-delay: 5588ms;
|
}
|
|
.meteor:nth-child(6) {
|
top: 50%;
|
left: 55%;
|
-webkit-animation-delay: 9388ms;
|
animation-delay: 9388ms;
|
}
|
|
.meteor:nth-child(6)::before,
|
.meteor:nth-child(6)::after,
|
.meteor:nth-child(6)::after {
|
-webkit-animation-delay: 9388ms;
|
animation-delay: 9388ms;
|
}
|
|
.meteor:nth-child(7) {
|
top: 95%;
|
left: 85%;
|
-webkit-animation-delay: 2588ms;
|
animation-delay: 2588ms;
|
}
|
|
.meteor:nth-child(7)::before,
|
.meteor:nth-child(7)::after,
|
.meteor:nth-child(7)::after {
|
-webkit-animation-delay: 2588ms;
|
animation-delay: 2588ms;
|
}
|
|
.meteor:nth-child(8) {
|
top: 95%;
|
left: 65%;
|
-webkit-animation-delay: 5288ms;
|
animation-delay: 5288ms;
|
}
|
|
.meteor:nth-child(8)::before,
|
.meteor:nth-child(8)::after,
|
.meteor:nth-child(8)::after {
|
-webkit-animation-delay: 5288ms;
|
animation-delay: 5288ms;
|
}
|
|
.meteor:nth-child(9) {
|
top: 95%;
|
left: 74%;
|
-webkit-animation-delay: 888ms;
|
animation-delay: 888ms;
|
}
|
|
.meteor:nth-child(9)::before,
|
.meteor:nth-child(9)::after,
|
.meteor:nth-child(9)::after {
|
-webkit-animation-delay: 888ms;
|
animation-delay: 888ms;
|
}
|
|
.meteor:nth-child(9) {
|
top: 95%;
|
left: 80%;
|
-webkit-animation-delay: 2388ms;
|
animation-delay: 2388ms;
|
}
|
|
.meteor:nth-child(9)::before,
|
.meteor:nth-child(9)::after,
|
.meteor:nth-child(9)::after {
|
-webkit-animation-delay: 2388ms;
|
animation-delay: 2388ms;
|
}
|
|
.meteor:nth-child(10) {
|
top: 95%;
|
right: 58%;
|
-webkit-animation-delay: 3588ms;
|
animation-delay: 3588ms;
|
}
|
|
.meteor:nth-child(10)::before,
|
.meteor:nth-child(10)::after,
|
.meteor:nth-child(10)::after {
|
-webkit-animation-delay: 3588ms;
|
animation-delay: 3588ms;
|
}
|
|
.meteor:nth-child(11) {
|
top: calc(50% - 135px);
|
left: calc(50% - 260px);
|
-webkit-animation-delay: 2888ms;
|
animation-delay: 2888ms;
|
}
|
|
.meteor:nth-child(11)::before,
|
.meteor:nth-child(11)::after,
|
.meteor:nth-child(11)::after {
|
-webkit-animation-delay: 2888ms;
|
animation-delay: 2888ms;
|
}
|
|
.meteor:nth-child(12) {
|
top: calc(50% - 15px);
|
left: calc(50% - 8px);
|
-webkit-animation-delay: 388ms;
|
animation-delay: 388ms;
|
}
|
|
.meteor:nth-child(12)::before,
|
.meteor:nth-child(12)::after,
|
.meteor:nth-child(12)::after {
|
-webkit-animation-delay: 388ms;
|
animation-delay: 388ms;
|
}
|
|
.meteor:nth-child(13) {
|
top: 20%;
|
left: 80%;
|
-webkit-animation-delay: 7288ms;
|
animation-delay: 7288ms;
|
}
|
|
.meteor:nth-child(13)::before,
|
.meteor:nth-child(13)::after,
|
.meteor:nth-child(13)::after {
|
-webkit-animation-delay: 7288ms;
|
animation-delay: 7288ms;
|
}
|
|
.meteor:nth-child(14) {
|
top: 20%;
|
left: 75%;
|
-webkit-animation-delay: 8888ms;
|
animation-delay: 8888ms;
|
}
|
|
.meteor:nth-child(14)::before,
|
.meteor:nth-child(14)::after,
|
.meteor:nth-child(14)::after {
|
-webkit-animation-delay: 8888ms;
|
animation-delay: 8888ms;
|
}
|
|
.meteor:nth-child(15) {
|
top: 20%;
|
left: 70%;
|
-webkit-animation-delay: 7588ms;
|
animation-delay: 7588ms;
|
}
|
|
.meteor:nth-child(15)::before,
|
.meteor:nth-child(15)::after,
|
.meteor:nth-child(15)::after {
|
-webkit-animation-delay: 7588ms;
|
animation-delay: 7588ms;
|
}
|
|
.meteor:nth-child(16) {
|
top: 20%;
|
left: 80%;
|
-webkit-animation-delay: 1888ms;
|
animation-delay: 1888ms;
|
}
|
|
.meteor:nth-child(16)::before,
|
.meteor:nth-child(16)::after,
|
.meteor:nth-child(16)::after {
|
-webkit-animation-delay: 1888ms;
|
animation-delay: 1888ms;
|
}
|
|
@-webkit-keyframes tail {
|
0% {
|
height: 0;
|
}
|
|
30% {
|
height: 100px;
|
}
|
|
100% {
|
height: 0;
|
}
|
}
|
|
@keyframes tail {
|
0% {
|
height: 0;
|
}
|
|
30% {
|
height: 100px;
|
}
|
|
100% {
|
height: 0;
|
}
|
}
|
|
// @-webkit-keyframes shining {
|
// 0% {
|
// width: 0;
|
// }
|
|
// 50% {
|
// width: 30px;
|
// }
|
|
// 1000% {
|
// width: 0;
|
// }
|
// }
|
|
// @keyframes shining {
|
// 0% {
|
// width: 0;
|
// }
|
|
// 50% {
|
// width: 30px;
|
// }
|
|
// 1000% {
|
// width: 0;
|
// }
|
// }
|
|
@-webkit-keyframes shooting {
|
0% {
|
-webkit-transform: translateY(0);
|
transform: translateY(0);
|
}
|
|
100% {
|
-webkit-transform: translateY(300px);
|
transform: translateY(300px);
|
}
|
}
|
|
@keyframes shooting {
|
0% {
|
-webkit-transform: translateY(0);
|
transform: translateY(0);
|
}
|
|
100% {
|
-webkit-transform: translateY(300px);
|
transform: translateY(300px);
|
}
|
}
|
|
// @-webkit-keyframes sky {
|
// 0% {
|
// -webkit-transform: rotate(45deg);
|
// transform: rotate(45deg);
|
// }
|
|
// 100% {
|
// -webkit-transform: rotate(405deg);
|
// transform: rotate(405deg);
|
// }
|
// }
|
|
// @keyframes sky {
|
// 0% {
|
// -webkit-transform: rotate(45deg);
|
// transform: rotate(45deg);
|
// }
|
|
// 100% {
|
// -webkit-transform: rotate(405deg);
|
// transform: rotate(405deg);
|
// }
|
// }
|
</style>
|
