实际效果，代码下载即可使用
流星图片
<!--
描述: 流星特效
作者: Jack GUO
日期: 20230727
-->
<template>
<div class="wrap-container sn-container">
<div class="pd-main-left">
<div class="yun-container">
<div class="yun-tree"></div>
<div class="line-fs"></div>
<div class="line-fs"></div>
<div class="line-fs"></div>
<div class="line-fs"></div>
<div class="line-fs"></div>
<div class="line-fs"></div>
<div class="line-fs"></div>
<div class="line-fs"></div>
<div class="line-fs"></div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "flashCloud",
data() {
return {
}
},
mounted() {
},
methods: {
},
beforeDestroy() {
}
};
</script>
<style lang="scss" scoped>
.wrap-container {
position: absolute;
overflow: hidden;
display: block;
cursor: default;
z-index: 0;
left: 0;
top: 0;
width: 500px;
height: 300px;
background-color: black;
}
.sn-container {
left: 512px;
top: 78px;
width: 432px;
height: 400px;
.pd-main-left {
position: relative;
width: 310px;
height: 335px;
transform: rotate(45deg);
.yun-container {
width: 100%;
height: 100%;
>div {
&:nth-child(2) {
height: 90%;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
-o-animation-delay: 1.5s;
animation-delay: 1.5s;
bottom: 0;
left: 51px;
}
&:nth-child(3) {
height: 100%;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
bottom: 32px;
left: 89px;
}
&:nth-child(4) {
height: 100%;
-webkit-animation-duration: 2.5s;
-moz-animation-duration: 2.5s;
-o-animation-duration: 2.5s;
animation-duration: 2.5s;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
bottom: 3px;
left: 179px;
-webkit-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
}
&:nth-child(5) {
height: 90%;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
bottom: 42px;
left: 229px;
}
&:nth-child(6) {
height: 100%;
-webkit-animation-duration: 2.5s;
-moz-animation-duration: 2.5s;
-o-animation-duration: 2.5s;
animation-duration: 2.5s;
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-o-animation-delay: 0.5s;
animation-delay: 0.5s;
bottom: 11px;
right: 48px;
}
&:nth-child(7) {
height: 90%;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-delay: 2.5s;
-moz-animation-delay: 2.5s;
-o-animation-delay: 2.5s;
animation-delay: 2.5s;
bottom: -22px;
right: 174px;
-webkit-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
}
&:nth-child(8) {
height: 90%;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
-o-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
-o-animation-delay: 1.5s;
animation-delay: 1.5s;
bottom: -22px;
right: 100px;
}
&:nth-child(9) {
height: 100%;
-webkit-animation-duration: 2.5s;
-moz-animation-duration: 2.5s;
-o-animation-duration: 2.5s;
animation-duration: 2.5s;
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-o-animation-delay: 2s;
animation-delay: 2s;
bottom: -10px;
right: 220px;
}
&:nth-child(10) {
height: 95%;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
-o-animation-delay: 1s;
animation-delay: 1s;
bottom: -41px;
right: 182px;
}
}
.yun-tree {
width: 100%;
height: 100%;
mix-blend-mode: screen;
}
.line-fs {
width: 14px;
height: 100%;
background-image: url(../../assets/line-fs.png);
background-repeat: no-repeat;
background-position: 50% 150%;
position: absolute;
z-index: -1;
-webkit-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
-moz-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
-o-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
}
}
}
}
@-webkit-keyframes fs {
0% {
background-position: 50% 150%;
}
50% {
background-position: 50% -132%;
}
100% {
background-position: 50% -264%;
opacity: 0;
}
}
@-moz-keyframes fs {
0% {
background-position: 50% 150%;
}
50% {
background-position: 50% -132%;
}
100% {
background-position: 50% -264%;
opacity: 0;
}
}
@-o-keyframes fs {
0% {
background-position: 50% 150%;
}
50% {
background-position: 50% -132%;
}
100% {
background-position: 50% -264%;
opacity: 0;
}
}
@keyframes fs {
0% {
background-position: 50% 150%;
}
50% {
background-position: 50% -132%;
}
100% {
background-position: 50% -264%;
opacity: 0;
}
}
</style>