css动画（四）

2023-10-31

推荐动画四

在这里插入图片描述
html代码上传

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>纯CSS3流星雨动画DEMO演示</title>

<link rel="stylesheet" href="css/style.css">

</head>
<body>

<div class="night">
  <div class="shooting_star"></div>
  <div class="shooting_star"></div>
  <div class="shooting_star"></div>
  <div class="shooting_star"></div>
  <div class="shooting_star"></div>
  <div class="shooting_star"></div>
  <div class="shooting_star"></div>
  <div class="shooting_star"></div>
  <div class="shooting_star"></div>
  <div class="shooting_star"></div>
  <div class="shooting_star"></div>
  <div class="shooting_star"></div>
  <div class="shooting_star"></div>
  <div class="shooting_star"></div>
  <div class="shooting_star"></div>
  <div class="shooting_star"></div>
  <div class="shooting_star"></div>
  <div class="shooting_star"></div>
  <div class="shooting_star"></div>
  <div class="shooting_star"></div>
</div>

</body>
</html>

css代码

body {
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  height: 100vh;
  overflow: hidden;
  font-family: 'Anton', sans-serif;
  justify-content: center;
  align-items: center;
}

.night {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
  -webkit-animation: sky 200000ms linear infinite;
          animation: sky 200000ms linear infinite;
}

.shooting_star {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 2px;
  background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0));
  border-radius: 999px;
  -webkit-filter: drop-shadow(0 0 6px #699bff);
          filter: drop-shadow(0 0 6px #699bff);
  -webkit-animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
          animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
}
.shooting_star::before, .shooting_star::after {
  content: '';
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  height: 2px;
  background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0));
  -webkit-transform: translateX(50%) rotateZ(45deg);
          transform: translateX(50%) rotateZ(45deg);
  border-radius: 100%;
  -webkit-animation: shining 3000ms ease-in-out infinite;
          animation: shining 3000ms ease-in-out infinite;
}
.shooting_star::after {
  -webkit-transform: translateX(50%) rotateZ(-45deg);
          transform: translateX(50%) rotateZ(-45deg);
}
.shooting_star:nth-child(1) {
  top: calc(50% - 185px);
  left: calc(50% - 150px);
  -webkit-animation-delay: 8971ms;
          animation-delay: 8971ms;
}
.shooting_star:nth-child(1)::before, .shooting_star:nth-child(1)::after, .shooting_star:nth-child(1)::after {
  -webkit-animation-delay: 8971ms;
          animation-delay: 8971ms;
}
.shooting_star:nth-child(2) {
  top: calc(50% - 50px);
  left: calc(50% - 179px);
  -webkit-animation-delay: 9256ms;
          animation-delay: 9256ms;
}
.shooting_star:nth-child(2)::before, .shooting_star:nth-child(2)::after, .shooting_star:nth-child(2)::after {
  -webkit-animation-delay: 9256ms;
          animation-delay: 9256ms;
}
.shooting_star:nth-child(3) {
  top: calc(50% - -146px);
  left: calc(50% - 135px);
  -webkit-animation-delay: 8700ms;
          animation-delay: 8700ms;
}
.shooting_star:nth-child(3)::before, .shooting_star:nth-child(3)::after, .shooting_star:nth-child(3)::after {
  -webkit-animation-delay: 8700ms;
          animation-delay: 8700ms;
}
.shooting_star:nth-child(4) {
  top: calc(50% - -77px);
  left: calc(50% - 157px);
  -webkit-animation-delay: 3147ms;
          animation-delay: 3147ms;
}
.shooting_star:nth-child(4)::before, .shooting_star:nth-child(4)::after, .shooting_star:nth-child(4)::after {
  -webkit-animation-delay: 3147ms;
          animation-delay: 3147ms;
}
.shooting_star:nth-child(5) {
  top: calc(50% - -183px);
  left: calc(50% - 8px);
  -webkit-animation-delay: 6588ms;
          animation-delay: 6588ms;
}
.shooting_star:nth-child(5)::before, .shooting_star:nth-child(5)::after, .shooting_star:nth-child(5)::after {
  -webkit-animation-delay: 6588ms;
          animation-delay: 6588ms;
}
.shooting_star:nth-child(6) {
  top: calc(50% - -29px);
  left: calc(50% - 195px);
  -webkit-animation-delay: 8009ms;
          animation-delay: 8009ms;
}
.shooting_star:nth-child(6)::before, .shooting_star:nth-child(6)::after, .shooting_star:nth-child(6)::after {
  -webkit-animation-delay: 8009ms;
          animation-delay: 8009ms;
}
.shooting_star:nth-child(7) {
  top: calc(50% - 95px);
  left: calc(50% - 69px);
  -webkit-animation-delay: 5420ms;
          animation-delay: 5420ms;
}
.shooting_star:nth-child(7)::before, .shooting_star:nth-child(7)::after, .shooting_star:nth-child(7)::after {
  -webkit-animation-delay: 5420ms;
          animation-delay: 5420ms;
}
.shooting_star:nth-child(8) {
  top: calc(50% - -59px);
  left: calc(50% - 70px);
  -webkit-animation-delay: 9378ms;
          animation-delay: 9378ms;
}
.shooting_star:nth-child(8)::before, .shooting_star:nth-child(8)::after, .shooting_star:nth-child(8)::after {
  -webkit-animation-delay: 9378ms;
          animation-delay: 9378ms;
}
.shooting_star:nth-child(9) {
  top: calc(50% - 76px);
  left: calc(50% - 238px);
  -webkit-animation-delay: 2845ms;
          animation-delay: 2845ms;
}
.shooting_star:nth-child(9)::before, .shooting_star:nth-child(9)::after, .shooting_star:nth-child(9)::after {
  -webkit-animation-delay: 2845ms;
          animation-delay: 2845ms;
}
.shooting_star:nth-child(10) {
  top: calc(50% - 83px);
  left: calc(50% - 6px);
  -webkit-animation-delay: 5205ms;
          animation-delay: 5205ms;
}
.shooting_star:nth-child(10)::before, .shooting_star:nth-child(10)::after, .shooting_star:nth-child(10)::after {
  -webkit-animation-delay: 5205ms;
          animation-delay: 5205ms;
}
.shooting_star:nth-child(11) {
  top: calc(50% - -137px);
  left: calc(50% - 267px);
  -webkit-animation-delay: 808ms;
          animation-delay: 808ms;
}
.shooting_star:nth-child(11)::before, .shooting_star:nth-child(11)::after, .shooting_star:nth-child(11)::after {
  -webkit-animation-delay: 808ms;
          animation-delay: 808ms;
}
.shooting_star:nth-child(12) {
  top: calc(50% - 12px);
  left: calc(50% - 8px);
  -webkit-animation-delay: 2406ms;
          animation-delay: 2406ms;
}
.shooting_star:nth-child(12)::before, .shooting_star:nth-child(12)::after, .shooting_star:nth-child(12)::after {
  -webkit-animation-delay: 2406ms;
          animation-delay: 2406ms;
}
.shooting_star:nth-child(13) {
  top: calc(50% - 148px);
  left: calc(50% - 47px);
  -webkit-animation-delay: 7566ms;
          animation-delay: 7566ms;
}
.shooting_star:nth-child(13)::before, .shooting_star:nth-child(13)::after, .shooting_star:nth-child(13)::after {
  -webkit-animation-delay: 7566ms;
          animation-delay: 7566ms;
}
.shooting_star:nth-child(14) {
  top: calc(50% - -28px);
  left: calc(50% - 75px);
  -webkit-animation-delay: 7634ms;
          animation-delay: 7634ms;
}
.shooting_star:nth-child(14)::before, .shooting_star:nth-child(14)::after, .shooting_star:nth-child(14)::after {
  -webkit-animation-delay: 7634ms;
          animation-delay: 7634ms;
}
.shooting_star:nth-child(15) {
  top: calc(50% - -37px);
  left: calc(50% - 203px);
  -webkit-animation-delay: 7743ms;
          animation-delay: 7743ms;
}
.shooting_star:nth-child(15)::before, .shooting_star:nth-child(15)::after, .shooting_star:nth-child(15)::after {
  -webkit-animation-delay: 7743ms;
          animation-delay: 7743ms;
}
.shooting_star:nth-child(16) {
  top: calc(50% - 41px);
  left: calc(50% - 256px);
  -webkit-animation-delay: 2888ms;
          animation-delay: 2888ms;
}
.shooting_star:nth-child(16)::before, .shooting_star:nth-child(16)::after, .shooting_star:nth-child(16)::after {
  -webkit-animation-delay: 2888ms;
          animation-delay: 2888ms;
}
.shooting_star:nth-child(17) {
  top: calc(50% - -35px);
  left: calc(50% - 121px);
  -webkit-animation-delay: 5864ms;
          animation-delay: 5864ms;
}
.shooting_star:nth-child(17)::before, .shooting_star:nth-child(17)::after, .shooting_star:nth-child(17)::after {
  -webkit-animation-delay: 5864ms;
          animation-delay: 5864ms;
}
.shooting_star:nth-child(18) {
  top: calc(50% - 73px);
  left: calc(50% - 225px);
  -webkit-animation-delay: 7883ms;
          animation-delay: 7883ms;
}
.shooting_star:nth-child(18)::before, .shooting_star:nth-child(18)::after, .shooting_star:nth-child(18)::after {
  -webkit-animation-delay: 7883ms;
          animation-delay: 7883ms;
}
.shooting_star:nth-child(19) {
  top: calc(50% - -69px);
  left: calc(50% - 47px);
  -webkit-animation-delay: 3339ms;
          animation-delay: 3339ms;
}
.shooting_star:nth-child(19)::before, .shooting_star:nth-child(19)::after, .shooting_star:nth-child(19)::after {
  -webkit-animation-delay: 3339ms;
          animation-delay: 3339ms;
}
.shooting_star:nth-child(20) {
  top: calc(50% - 162px);
  left: calc(50% - 129px);
  -webkit-animation-delay: 7963ms;
          animation-delay: 7963ms;
}
.shooting_star:nth-child(20)::before, .shooting_star:nth-child(20)::after, .shooting_star:nth-child(20)::after {
  -webkit-animation-delay: 7963ms;
          animation-delay: 7963ms;
}

@-webkit-keyframes tail {
  0% {
    width: 0;
  }
  30% {
    width: 100px;
  }
  100% {
    width: 0;
  }
}

@keyframes tail {
  0% {
    width: 0;
  }
  30% {
    width: 100px;
  }
  100% {
    width: 0;
  }
}
@-webkit-keyframes shining {
  0% {
    width: 0;
  }
  50% {
    width: 30px;
  }
  100% {
    width: 0;
  }
}
@keyframes shining {
  0% {
    width: 0;
  }
  50% {
    width: 30px;
  }
  100% {
    width: 0;
  }
}
@-webkit-keyframes shooting {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(300px);
            transform: translateX(300px);
  }
}
@keyframes shooting {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(300px);
            transform: translateX(300px);
  }
}
@-webkit-keyframes sky {
  0% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  100% {
    -webkit-transform: rotate(405deg);
            transform: rotate(405deg);
  }
}
@keyframes sky {
  0% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  100% {
    -webkit-transform: rotate(405deg);
            transform: rotate(405deg);
  }
}

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css动画

css动画（四）的相关文章

剑指 Offer 14- I. 剪绳子&&剑指 Offer 14- II. 剪绳子 II（动态规划+贪心算法）

剑指 Offer 14 I 剪绳子题目描述剑指Offer 66 剪绳子给你一根长度为 n 的绳子请把绳子剪成整数长度的 m 段 m n都是整数 n gt 1并且m gt 1 每段绳子的长度记为 k 0 k 1 k m 1 请问 k
哈夫曼树(Huffman Tree)学习总结

定义将所要编码的字符作为叶子结点的树为哈夫曼树作用解决编码问题模板 priority queue
UmiJS实战

一配置项 hash 配置是否让生成的文件包含 hash 后缀通常用于增量发布和避免浏览器加载缓存 hash true base 设置路由前缀通常用于部署到非根目录 base dengta publicPath 打包的时候 webpac
CVPR2023

欢迎关注 CVHub 官方微信公众号 Title Efficient Semantic Segmentation by Altering Resolutions for Compressed Videos PDF https arxiv o
字节十年工程师整理的RobotFramework自动化测试框架介绍及应用

目录一概念二特性三 RF环境安装四 RF的使用五 RF的常用类库六 RF的常用关键字的使用七准备UI自动化测试的环境八浏览器操作的关键字九元素定位十项目的三层架构十一 RF非GUI方式命令行运行与Jen
C++：让自己习惯C++(Effective C++)

文章目录写在前面 01 视C 为一个语言联邦 02 尽量用const enum inline替换 define 03 尽可能使用const 04 确认对象被使用前已先被初始化写在前面这是对Effective C 这本书中的部分内容进行
音乐服务器制作教程,让NAS做音乐服务器

最终的目的是让手机APP可以随时播放家里NAS上下载的音乐经过以前的尝试和最近百度谷歌有了一些成果分享出来一 NAS自带服务和手机APP 优点是布署简单都是直接用我只用过黑群的软件只能说可以用除了特简单再没有什么特点需要有
用Charles来模拟弱网测试环境

在我们平时的测试过程中需要模拟很多的测试场景比如常见的弱网测试你不可能说去地铁停车场实地去测试那么我们就需要模拟弱网环境今天就讲一下如何通过charles来模拟弱网环境 1 首先打开Charles 点击Proxy 选择Throt
Latex插入参考文献的两种方法—自动与手动

先忍不住吐槽一下为啥都21世纪了还有期刊要求参考文献要放在 tex文件里面使用 bib文件多简洁优美啊现在我们就来看下latex中插入参考文献的两种方法第一种自动方法使用 bib文件在主文件 tex的同级目录下创建exampl
6、服务数据的定义和使用

一服务数据模型二具体实现步骤 1 首先现在功能包中创建一个srv的文件夹然后在改文件夹下新建一个以 srv为后缀的文件所举例的该文件的具体内容如下 string name uint8 age uint8 sex uint8 unk
2023最新版Anaconda下载安装教程（非常详细）从零基础入门到精通，看完这一篇就够了

1 前言小编的电脑是win10系统的这里以win10系统安装Anaconda为例其他的系统安装过程类似可以照猫画虎下面请看具体的安装过程 2 下载软件 1 首先去官网上进行下载软件下载地址 https docs anaconda
专访雅虎刷题狂人曹鹏：10年理论与实践结合的程序员之路

采访联络员 SophyJ 作者 ly行云流水所属机构 CSDN高校俱乐部高校发布地址 http student csdn net mcd topic 163587 941331 摘要在曹鹏博士的采访过程中他最长提起的便是感恩感谢良
Floyd算法的原理和实现代码

原理假设有向图G V E 采用邻接矩阵存储设置一个二维数组A用于存放当前顶点之间的最短路径长度分量A i j 表示当前顶点i gt j的最短路径长度然后每次添加一个顶点同时对A的数组进行筛选优化期间会产生k个A数组 Ak i
第一个vue程序

div message h2 school name school moblie h2 div
程序、进程、线程联系以及进程和线程的区别和联系

程序和进程的区别与联系程序是一组有序的指令集合是一个静态的概念一个程序由一组指令组成以二进制方式存在存储器中进程是程序及其数据在计算机上的一次运行活动是一个动态的概念进程的运行实体是程序离开的程序的进程没有意义进程是由程序

随机推荐

交互原型设计工具

1 axure RP 适合快速创建应用软件或Web线框图流程图原型和规格说明文档优点支持交互设计并可生成规格说明文档和输出HTML原型 Axure RP 集 UX 原型规范和图表于一身 2 Sketch 适合为视觉设计师打造
图数据库——大数据时代的高铁

作者董小珊姚臻责编仲培艺 zhongpy csdn net 本文为程序员原创文章未经允许不得转载更多精彩文章请订阅程序员如果把传统关系型数据库比做火车的话那么到现在大数据时代图数据库可比做高铁它已成为NoSQL中关
IDEA鼠标右击new没有class和interface的解决办法

IDEA点击new没有class和interface 问题如下图解决办法 1 File gt Project Structure 如下图所示 2 选择Modules gt 右边Sources中选择所需目录然后点击 Sources gt
云平台的技术

约束记录表简朴勤劳谦虚诚恳禁止浪费珍惜时间虚心学习纯心做人 1 0 1 1 节制静默条理决断不恋吃睡开口有益规整事务坚持迅捷 0 1 1 1 正直中庸整洁宁静贞洁敬业负责不倚势凌人外表整洁不纠
【解决】windows安装pycrypto出错问题。error C2061: 语法错误: 标识符“intmax_t”

1 执行命令报错 pip install pycrypto Installing collected packages pycrypto Running setup py install for pycrypto error ERROR C
easyUI Tree树动态刷新子节点

tree tree url xxx 默认是post请求 checkbox false animate true lines true loadFilter function rows 返回要显示的过滤数据返回数据时以标准树格式返回的也就
MongodbTemplate 批量更新或者修改

批量更新或者修改 public void saveOnlineStatusList List
线性反馈移位寄存器 LFSR

参考连接添加链接描述运算基础模2运算线性反馈移位寄存器用于产生可重复的伪随机序列PRBS 该电路由n级除法器和异或门组成在k阶段寄存器存在初值 Rn 1 R1 R0 称为seed 在k 1阶段寄存器的值变为 k 1阶段 Rn
word2010或以上版本编号变成黑块的正确处理方

打开编号显示为黑块的文档把光标放置在黑块的后面然后在键盘上按左方向键则黑块变灰色为选中状态 2 然后按下ctrl shift s 出现应用样式窗口点击重新应用黑块显示成正常的编号 3 然后点击多级列表按钮选择定义新的多级
一次数据库的选型，FireBird胜出

做了n多年的J2EE应用以后如何做客户端的BI确实让我一下子摸不到门路近期的一个客户要求我们给他做基于客户端的BI分析客户是对外提供重要数据的单位有很多的客户每年购买他的数据可以说人家的数据库每行每列都是钱在这种情况下他们非
css实现文字环绕图片布局

前言 css实现文字环绕图片的效果实现效果实现代码通过图片属性 align div style width 400px img src d303 paixin com thumbs 3548553 231637502 staff 10
数据结构——AVL树

目录 1 什么是AVL树 2 AVL树插入的模拟实现节点定义插入旋转右单旋左单旋双旋右左旋双旋左右旋完整的插入代码 3 AVL树的性能分析 1 什么是AVL树 AVL树是一种自平衡二叉查找树也被称为高度平衡树它具有以
小福利，数据可视化之常见图形的绘制

大家好我是天空之城今天带来小福利数据可视化之常见图形的绘制读取本专科群体的数据 college student data pd read csv 工作 college student data csv encoding ut
opencv提取图像中的颜色直方图（RGB、HSV）

本篇博客主要介绍利用opencv工具提取一幅图像中的颜色直方图特征所谓颜色直方图指的是一幅图像中的颜色分布与图像中的特定的物体无关只是用来表示人的眼睛观察到的图像中的颜色分布情况例如说一幅图中红色占了多少比例绿色占了多少比例等
模型旋转触摸屏手指滑动360度旋转安卓版本 EasyTouch

using UnityEngine using System Collections using System Collections Generic using DG Tweening using UnityEngine EventSys
4.2.3 积分法（二）——分部积分法

emmmm想想词算了想不出来既然不定积分和导数是反操作那就从导数开始说吧先看一个导数公式就不解释变形过程了上图其实就是分部积分法的计算过程总之是分成两个步骤先分部再积分至于 C等到完全积分积出来之后再加目前我们总结过的不
深入 Python 3

深入 Python 3 http dipyzh bitbucket org table of contents html xml 目录深入 Python 3 中有何新内容又名负号层安装 Python 深入哪个版本的 Python
ajax前后端交互示例

文章目录一前后端交互方法 1 Ajax前端示例 1 1 特点 1 2 ajax同域请求示例 1 3 ajax跨域请求示例 2 后端示例 2 1 controller层处理一前后端交互方法 1 Ajax前端示例 1 1 特点 Ajax
leetcode92 反转链表II

题目给你单链表的头指针 head 和两个整数 left 和 right 其中 left lt right 请你反转从位置 left 到位置 right 的链表节点返回反转后的链表示例输入 head 1 2 3 4 5 left 2
css动画（四）

推荐动画四 html代码上传 div class night div class shooting star div div class shooting star div div class shooting star div div c

css动画（四）

推荐动画四

css动画（四） 的相关文章

随机推荐

热门标签

css动画（四）的相关文章