/* 开始 */
body {background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);height: 100vh;overflow: hidden;display: flex;font-family: 'Anton', sans-serif;justify-content: center;align-items: center;
}.night {position: fixed;left:0;top: 0;width: 100vw;height: 100vh;-webkit-transform: rotateZ(45deg);transform: rotateZ(45deg);-webkit-animation: sky 200000ms linear infinite;animation: sky 200000ms linear infinite;
}.shooting_star {position: absolute;left: 10%;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(10% - 185px);left: calc(10% - 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(15% - 50px);left: calc(15% - 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(20% - -146px);left: calc(20% - 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(30% - -77px);left: calc(30% - 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(40% - -183px);left: calc(40% - 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(60% - 95px);left: calc(60% - 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(70% - -59px);left: calc(70% - 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(80% - 76px);left: calc(80% - 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(90% - 83px);left: calc(90% - 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(100% - -137px);left: calc(100% - 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);}
}/* 结束 */

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

css实现流星划过的效果相关推荐

  1. css3实现流星划过动画效果

    html结构: <div class="d-shootingStar"><div class="d-stars"></div> ...

  2. css实现流星划过动画

    背景

  3. cocos2d-x 流星划过特效

    手指划过,出现流星划过的效果,如图: 代码如下,只要在接受触摸事件的函数内调用addMeteorAtPosition()方法即可: FlashingMeteors.h #ifndef Flashing ...

  4. HTML5+CSS3小实例：流星划过天际的动画效果

    实例:流星划过天际的动画效果 技术栈:HTML.CSS 图片素材: 效果: 源码: <!DOCTYPE html> <html><head><meta htt ...

  5. php直播源码，css实现流星效果

    php直播源码,css实现流星效果相关的代码 <div id="stars" style="width: 100%;height: 100vh;margin: 0; ...

  6. scratch模拟流星划过夜空的动画/少儿编程scratch教研教案课件课程素材脚本

    这是面试的时候,一家单位给我出的试讲题,要求是: 做一个流星划过夜空的动画,要求随机从夜空每隔不长的随机时间出现一颗流星并开始运动.运动期间拖着长长的尾巴从夜空一端运动到另一端(尽量由上至下与大自然实 ...

  7. 用CSS Filter 可以实现相同的效果

    用CSS Filter 可以实现相同的效果,而且可以省去图片,代码如下: <table width="100%" height="133"  border ...

  8. html桌面卡牌效果,html+css实现响应式卡片悬停效果

    话不多,看效果先: 卡片悬停,响应式卡片,简约效果. 实现: 1. 定义标签,.kapian为最底层盒子,然后两个子盒子一个放图片,一个放文本: The aurora borealis natural ...

  9. [css] 请说说CSS3实现文本效果的属性有哪些？

    [css] 请说说CSS3实现文本效果的属性有哪些? text-shadow:文字阴影效果 word-wrap:换行设置 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷 ...

最新文章

  1. Oracle数据删除后恢复
  2. abaqus画一个球 python_简单几步，100行代码用Python画一个蝙蝠侠的logo
  3. asp.net 导出excel带图片
  4. Python学习笔记-2017.5.4thon学习笔记-2017.8.14
  5. Python | 新手必会的 9 个 Python 技巧
  6. 因为喜欢，所以选择它
  7. 95-34-035-Context-HeadContext和TailContext
  8. StopWatch工具
  9. UI设计素材|社交界面模板
  10. OpenShift 4 - 解决 OpenShift 中 elasticsearch 环境的 Log4j 漏洞
  11. php 实现mqtt 订阅监听功能出错_IoT物联网实现M2M设备之间联动实战
  12. 用反射实现简单的框架
  13. 区块链 智能合约安全 对关键状态变量的意外更改
  14. 066 模块的搜索路径
  15. 解决办法： error: passing ‘const VideoFrame’ as ‘this’ argument discards qualifiers [-fpermissive]
  16. Java编程思想笔记一：基本概念
  17. vulhub-靶场实战-安装
  18. ENVI监督分类错误：分离度为0.00000解决办法
  19. 《2020国内WAF产品研究报告》
  20. 程序员业余时间修炼指南

热门文章

  1. springboot整合poi读取数据库数据和图片动态导出excel
  2. jsp+servlet框架
  3. K8S 部署 coredns
  4. JavaScript 判断是否包含汉字 正则表达式 亲测
  5. c++做一个计算两向量夹角的程序
  6. IDEA 使用补丁 patch
  7. 什么叫Kotlin元组（Pair Triple）
  8. 你们期待的！免费加入星球福利
  9. Android_003_android应用程序安装后图标不显示
  10. RSYNC(Linux to Linux)