首先先创建一个星星闪烁、流星划过组件页面,代码如下:
// 星星闪烁组件
<template>
<div>
<div
class="star star2"
:style="
'width:' +
size +
'px;height:' +
size +
'px;top:' +
top +
'px;left:' +
left +
'px;right:' +
right +
'px;animation-delay:' +
delay +
's'
"
></div>
</div>
</template>
<script>
export default {
props: {
size: {
type: String,
default: '',
},
top: {
type: String,
default: '',
},
left: {
type: String,
default: '',
},
right: {
type: String,
default: '',
},
delay: {
type: String,
default: '',
},
},
data() {
return {}
},
created() {
console.log(this.delay)
},
methods: {},
}
</script>
<style lang="scss" scoped>
.star {
background-image: url('https://sucai.suoluomei.cn/sucai_zs/images/20201211172037-211357_VOTl_3549294.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: absolute;
animation: opacity-change 1s ease-in-out infinite;
-webkit-animation: opacity-change 1s ease-in-out infinite;
-moz-animation: opacity-change 1s ease-in-out infinite;
-o-animation: opacity-change 1s ease-in-out infinite;
opacity: 0;
}
.star2 {
animation: opacity-change 2s ease-in-out infinite;
-webkit-animation: opacity-change 2s ease-in-out infinite;
-moz-animation: opacity-change 2s ease-in-out infinite;
-o-animation: opacity-change 2s ease-in-out infinite;
}
@keyframes opacity-change {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes opacity-change {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-moz-keyframes opacity-change {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-o-keyframes opacity-change {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
// 流行划过组件
<template>
<div>
<div
class="meteor"
:style="
'width:' +
size +
'px;height:' +
size +
'px;top:' +
top +
'px;left:' +
left +
'px;right:' +
right +
'px;animation-delay:' +
delay +
's'
"
></div>
</div>
</template>
<script>
export default {
props: {
size: {
type: String,
default: '',
},
top: {
type: String,
default: '',
},
left: {
type: String,
default: '',
},
right: {
type: String,
default: '',
},
delay: {
type: String,
default: '',
},
},
data() {
return {}
},
created() {},
methods: {},
}
</script>
<style lang="scss" scoped>
.meteor {
display: block;
width: 5px;
height: 5px;
border-radius: 50%;
background: #fff;
position: absolute;
transform-origin: 100% 0;
animation: meteor-ani 4s linear infinite;
-webkit-animation: meteor-ani 5s linear infinite;
box-shadow: 0 0 5px 5px rgba(255, 255, 255, 0.3);
opacity: 0;
z-index: 0;
}
.meteor:after {
content: '';
display: block;
border: 0px solid #fff;
border-width: 0px 90px 2px 90px;
border-color: transparent transparent transparent rgba(255, 255, 255, 0.3);
transform: rotate(-45deg) translate3d(1px, 3px, 0);
box-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.1);
transform-origin: 0% 100%;
}
.pink {
top: 100px;
left: 800px;
background: #fff;
animation-delay: 3s;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
}
.pink:after {
border-color: transparent transparent transparent #fff;
animation-delay: 3s;
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
}
.blue {
top: 120px;
left: 1200px;
background: fff;
animation-delay: 7s;
-webkit-animation-delay: 7s;
-moz-animation-delay: 7s;
}
.blue:after {
border-color: transparent transparent transparent fff;
-webkit-animation-delay: 7s;
-moz-animation-delay: 7s;
animation-delay: 7s;
}
@keyframes meteor-ani {
0% {
opacity: 0;
transform: scale(0) translate3d(0, 0, 0);
}
20% {
opacity: 0.8;
transform: scale(0.2) translate3d(-100px, 100px, 0);
}
40% {
opacity: 0.8;
transform: scale(0.4) translate3d(-200px, 200px, 0);
}
60% {
opacity: 0.8;
transform: scale(0.6) translate3d(-300px, 300px, 0);
}
80% {
opacity: 1;
transform: scale(1) translate3d(-350px, 350px, 0);
}
100% {
opacity: 1;
transform: scale(1.2) translate3d(-400px, 380px, 0);
}
}
</style>
父页面引用两个组件:
<template>
<div class="content">
<!-- 星星 -->
<!-- size 尺寸 top 距离顶部位置 left 距离左边位置
right 距离右边位置 delay 延迟出现特效时间秒数
-->
<Star size="50" top="50" left="400" delay="0" />
<Star size="70" top="150" right="250" delay="0.3" />
<Star size="90" top="250" left="250" delay="1.1" />
<Star size="100" top="340" right="400" delay="1.7" />
<Star size="80" top="400" left="350" delay="2" />
<!-- 流星 -->
<Meteor size="5" top="100" left="450" delay="0" />
<Meteor size="5" top="150" left="800" delay="3" />
<Meteor size="5" top="200" right="350" delay="7" />
</div>
</template>
<script>
import Star from '@/components/pc/star'
import Meteor from '@/components/pc/meteor'
export default {
components: {
Star,
Meteor,
},
data() {
return {}
},
created() {},
methods: {},
}
</script>
<style lang="scss" scoped>
.content {
min-width: 1200px;
overflow-x: hidden;
}
</style>
这样就可以啦!