流星特效案例代码

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

 流星图片

 

<!--

 描述: 流星特效

 作者: 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，一经查实，立即删除！

相关文章

【并发编程】ThreadLocal

【并发编程】ThreadLocal

从名字我们就可以看到 ThreadLocal 叫做线程变量&#xff0c;意思是 ThreadLocal 中填充的变量属于当前线程&#xff0c;该变量对其他线程而言是隔离的。 ThreadLocal 为变量在每个线程中都创建了一个副本&#xff0c;那么每个线程可以访问自己内部的副本变量。 static ThreadL…
阅读更多...
Flutter环境搭建踩坑集锦

Flutter环境搭建踩坑集锦

Flutter 背景准备工作先检查一下自己的电脑&#xff0c;看一下是不是满足配置要求下载安装配置环境下载安装JDK下载安装Android studio下载Flutterflutter doctor故障Android license status unknownNetwork resources 故障 后记 背景 发现一个不错的框架Flutter&#xff0c;听…
阅读更多...
ai创作系统CHATGPT支持GPT4.0+支持ai绘画(MJ)+ai绘画(SD)集合几百种AI智能工具

ai创作系统CHATGPT支持GPT4.0+支持ai绘画(MJ)+ai绘画(SD)集合几百种AI智能工具

生成的AI绘画 非常的奈斯 包括GPT
阅读更多...
SVO pro 编译运行

SVO pro 编译运行

SVO pro 编译运行 编译安装ROS安装依赖下载和编译 编译 安装ROS 小鱼一键安装ROS 安装依赖 Install catkin tools and vcstools # For Ubuntu 18.04 Melodic sudo apt-get install python-catkin-tools python-vcstool # For Ubuntu 20.04 Noetic sudo apt-get install …
阅读更多...
openpnp - 设备矫正的零碎记录

openpnp - 设备矫正的零碎记录

文章目录 openpnp - 设备矫正的零碎记录概述笔记设备内部不能有任何强干扰源相机就选100W像素的就行, 没有特殊要求openpnp软件的选择视觉归位必须禁止轴的赤隙矫正不用做运行openpnp软件的计算机, 必须是台式机校验完成后, 数据占用的体积END openpnp - 设备矫正的零碎记录 概…
阅读更多...
线程同步问题——锁

线程同步问题——锁

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

什么是 DNS ANAME 解析？

本人使用谷歌搜索了简中互联网&#xff0c;完全没有找到任何有关 ANAME 的文章……本文该不会是头一份吧 相信大家对于 DNS 的解析方式都不陌生&#xff0c;常见的有 A、CNAME、MX、TXT 记录等等。其中&#xff0c;网站常用的是 A 记录和 CNAME 记录&#xff1a;A 记录用于将域…
阅读更多...
Kafka 入门到起飞 - 生产者参数详解 ，什么是生产者确认机制？ 什么是ISR？ 什么是 OSR?

Kafka 入门到起飞 - 生产者参数详解 ，什么是生产者确认机制？ 什么是ISR？ 什么是 OSR?

上回书我们讲了&#xff0c;生产者发送消息流程解析传送门 那么这篇我们来看下&#xff0c;生产者发送消息时几个重要的参数详解 &#xff0c;什么是生产者确认机制&#xff1f; 什么是ISR&#xff1f; 什么是 OSR? 参数&#xff1a; bootstrap.servers &#xff1a; Kafka 集…
阅读更多...
【Django学习】（十六）session_token认证过程与区别_响应定制

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

一、认识session与token 这里就直接引用别人的文章&#xff0c;不做过多说明 网络应用中session和token本质是一样的吗&#xff0c;有什么区别&#xff1f; - 知乎 二、token响应定制 在全局配置表中配置 DEFAULT_AUTHENTICATION_CLASSES: [# 指定jwt Token认证rest_framew…
阅读更多...
记一次安装nvm切换node.js版本实例详解

记一次安装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

Android复习（Android基础-四大组件）—— Activity

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

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.…
阅读更多...
Python的Selenium 3 和Selenium 4的写法区别

Python的Selenium 3 和Selenium 4的写法区别

1.Python 版本问题&#xff1a; Selenium 3的话使用Python 3.6.5都可以继续编写&#xff0c;但是到了Selenium 4的时候&#xff0c;python 的版本需要 3.7 或 更高的版本。 2.差异&#xff1a; Selenium 4 移除了对旧协议的支持&#xff0c;并在引擎盖下默认使用 W3C WebDriver…
阅读更多...
oracle_11g更改统计信息收集时间

oracle_11g更改统计信息收集时间

1.获得当前自动收集统计信息的执行时间 col WINDOW_NAME for a20col REPEAT_INTERVAL for a80col DURATION for a30set linesize 1200SELECT t1.window_name, t1.repeat_interval, t1.duration,enabled FROM dba_scheduler_windows t1;WINDOW_NAME REPEAT_INTERVAL …
阅读更多...
Docker安装 Mysql 8.x 版本

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学习

web学习

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

Redis部署

一、redis hash tag 使用原因&#xff0c;出现错误 redis.exceptions.ResponseError: CROSSSLOT Keys in request dont hash to the same slot 在集群中&#xff0c;key会被划分到不同的槽中。不同的节点会拥有散列槽的一个子集。 多个key的操作、事务或者lua脚本调用多个k…
阅读更多...
Vue通过指令 命令将打包好的dist静态文件上传到腾讯云存储桶 （保存原有存储目录结构）

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…
阅读更多...
ffmpeg 中 av_log 是怎样工作的?

ffmpeg 中 av_log 是怎样工作的?

---------------------------------------- author: hjjdebug date: 2023年 07月 27日 星期四 14:56:38 CST descriptor: ffmpeg 中 av_log 是怎样工作的? ---------------------------------------- av_log 功能其实只是添加了颜色,LOG级别,及log上下文名称,没有添加时间,函…
阅读更多...
工程师是怎样对待开源

工程师是怎样对待开源

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

Copyright @ 2022~2023