實(shí)際效果，代碼下載即可使用
?流星圖片
?
<!--
?描述: 流星特效
?作者: 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;
}文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-611604.html
.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>文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-611604.html
到了這里，關(guān)于流星特效案例代碼的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
