流星特效案例代码

实际效果,代码下载即可使用

 流星图片

 

<!--

 描述: 流星特效

 作者: 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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/15597.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Flutter环境搭建踩坑集锦

Flutter 背景准备工作先检查一下自己的电脑&#xff0c;看一下是不是满足配置要求下载安装配置环境下载安装JDK下载安装Android studio下载Flutterflutter doctor故障Android license status unknownNetwork resources 故障 后记 背景 发现一个不错的框架Flutter&#xff0c;听…

线程同步问题——锁

文章目录 线程同步互斥锁&#xff08;互斥量&#xff09;相关操作函数应用 死锁读写锁相关操作函数 线程同步 临界区——代码 临界数据——共享数据 原子操作&#xff1a;不可以被其他操作打断 必须的&#xff0c;用以保证数据的安全性 实现线程同步的方式&#xff1a; 互斥量…

什么是 DNS ANAME 解析?

本人使用谷歌搜索了简中互联网&#xff0c;完全没有找到任何有关 ANAME 的文章……本文该不会是头一份吧 相信大家对于 DNS 的解析方式都不陌生&#xff0c;常见的有 A、CNAME、MX、TXT 记录等等。其中&#xff0c;网站常用的是 A 记录和 CNAME 记录&#xff1a;A 记录用于将域…

【Django学习】(十六)session_token认证过程与区别_响应定制

一、认识session与token 这里就直接引用别人的文章&#xff0c;不做过多说明 网络应用中session和token本质是一样的吗&#xff0c;有什么区别&#xff1f; - 知乎 二、token响应定制 在全局配置表中配置 DEFAULT_AUTHENTICATION_CLASSES: [# 指定jwt Token认证rest_framew…

记一次安装nvm切换node.js版本实例详解

最后效果如下&#xff1a; 背景&#xff1a;由于我以前安装过node.js&#xff0c;后续想安装nvm将node.js管理起来。 问题&#xff1a;nvm-use命令行运行成功&#xff0c;但是nvm-list显示并没有成功。 原因&#xff1a;因为安装过node.js&#xff0c;所以原先的node.js不收n…

Android复习(Android基础-四大组件)—— Activity

Activity作为四大组件之首&#xff0c;是使用最为频繁的一种组件&#xff0c;中文直接翻译为"活动"&#xff0c;不过如果被翻译为"界面"会更好理解。正常情况&#xff0c;除了Window&#xff0c;Dialog和Toast &#xff0c; 我们能见到的界面只有Activity。…

RT1052 的四定时器

文章目录 1 Quad Timer&#xff0c;简称&#xff1a;QTMR2 单个通道的框图3 QTMR配置3.1 QTMR1 时钟使能。3.2 初始化 QTMR1。3.2.1 QTMR_Init 3.3 设置 QTMR1 通道 0 的定时周期。3.3.1QTMR_SetTimerPeriod 3.4 使能 QTMR1 通道 0 的比较中断。3.4.1 QTMR_EnableInterrupts 3.…

Docker安装 Mysql 8.x 版本

文章目录 Docker安装 Mysql 8.0.22Mysql 创建账号并授权Mysql 数据迁移同版本数据迁移跨版本数据迁移 Mysql 5.x 版本与 Mysql 8.x版本是两个大版本&#xff0c;这里演示安装Mysql 8.x版本 Docker安装 Mysql 8.0.22 # 下载mysql $ docker pull mysql 默认安装最新…

web学习

TCP/IP体系结构&#xff08;IP和端口&#xff09;&#xff1a; IP是什么&#xff1a;是计算机在互联网上的唯一标识&#xff08;坐标&#xff0c;代号&#xff09;&#xff0c;用于在互联网中寻找计算机。 访问网站时&#xff1a;域名会通过DNS&#xff08;解析服务&#xff…

Vue通过指令 命令将打包好的dist静态文件上传到腾讯云存储桶 (保存原有存储目录结构)

1、在项目根目录创建uploadToCOS.js文件 &#xff08;建议起简单的名字 方便以后上传输入命令方便&#xff09; 2、uploadToCOS.js文件代码编写 const path require(path); const fs require(fs); const COS require(cos-nodejs-sdk-v5);// 配置腾讯云COS参数 const cos n…

工程师是怎样对待开源

工程师如何对待开源 本文是笔者作为一个在知名科技企业内从事开源相关工作超过 20 年的工程师&#xff0c;亲身经历或者亲眼目睹很多工程师对待开源软件的优秀实践&#xff0c;也看到了很多 Bad Cases&#xff0c;所以想把自己的一些心得体会写在这里&#xff0c;供工程师进行…

跨域冲突问题解决

1、问题分析 服务端和nginx代理 都做了跨域配置&#xff0c;导致请求头重复 headers 里面有两个重复的 Access-Control-Allow-Origin Access-Control-Allow-Methods Access-Control-Allow-Credentials 2、解决方法 在nginx去除服务端的跨域配置 proxy_hide_header Access-…

铁路关基保护新规:优先采购安全可信的网络产品和服务!

《征求意见稿》第十四条提到&#xff1a;运营者应当加强供应链安全保护&#xff0c;优先采购安全可信的网络产品和服务&#xff1b;采购网络产品和服务影响或者可能影响国家安全的&#xff0c;运营者应当预判网络产品和服务投入使用后可能带来的国家安全风险&#xff0c;按照国…

quarkus核心编程笔记

此篇只做总结&#xff0c;有大佬做的更详细 大佬quarkus笔记 依赖注入 在应用中&#xff0c;一个接口有多个实现是很常见的&#xff0c;那么依赖注入时&#xff0c;如果类型是接口&#xff0c;如何准确选择实现呢&#xff1f; 修饰符匹配Named注解属性匹配根据优先级选择写…

论文笔记--GloVe: Global Vectors for Word Representation

论文笔记--GloVe: Global Vectors for Word Representation 1. 文章简介2. 文章概括3 文章重点技术3.1 两种常用的单词向量训练方法3.2 GloVe3.3 模型的复杂度 4. 文章亮点5. 原文传送门6. References 1. 文章简介 标题&#xff1a;GloVe: Global Vectors for Word Representa…

自己实现MyBatis 底层机制--抽丝剥茧(上)

&#x1f600;前言 本篇博文是学习过程中的笔记和对于MyBatis底层机制的分析思路&#xff0c;希望能够给您带来帮助&#x1f60a; &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章可以帮助到…

(树) 剑指 Offer 27. 二叉树的镜像 ——【Leetcode每日一题】

❓剑指 Offer 27. 二叉树的镜像 难度&#xff1a;简单 请完成一个函数&#xff0c;输入一个二叉树&#xff0c;该函数输出它的镜像。 例如输入&#xff1a; 4/ \2 7/ \ / \1 3 6 9镜像输出&#xff1a; 4/ \7 2/ \ / \9 6 3 1示例 1&#xff1a; 输…

28_计算机网络(Computer Networks)基础

本篇介绍计算机网络的基础知识。 文章目录 1. 计算机网络历史2. 以太网" (Ethernet)2.1 以太网" (Ethernet)的简单形式及概念2.2 指数退避解决冲突问题2.3 利用交换机减少同一载体中设备2.4 互联网&#xff08;The Internet&#xff09;2.5 路由(routing)2.6 数据包…

基于峰谷分时电价引导下的电动汽车充电负荷优化(matlab代码)

目录 1 主要内容 峰谷电价优化 电动汽车充电负荷变化 2 部分代码 3 程序结果 1 主要内容 该程序基本复现《基于峰谷分时电价引导下的电动汽车充电负荷优化》&#xff0c;代码主要做的是基于NSGA-II的电动汽车充电负荷优化&#xff0c;首先&#xff0c;在研究电动汽车用户充…