纯css实现的流星雨的效果

查看效果

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>html,body {width: 100%;height: 100%;margin: 0;background:#444444;}.space {width: 235px;height: 280px;margin:150px;background: #121212;float:left;overflow: hidden;}.space .star {display: block;width: 0px;height: 0px;border-radius: 50%;background: #fff;top: -50px;left:200px;position: relative;transform-origin: 100% 0;animation: star-ani 6s infinite ease-out;box-shadow: 0 0 0px 0px rgba(255, 255, 255, .3);opacity: 0;z-index: 2;}.space .star:after {content: '';display: block;top: -10px;left: 200px;border: 0px solid #fff;border-width: 0px 90px 3px 90px;border-color: transparent transparent transparent #fff;transform: rotate(-45deg) translate3d(1px, 3px, 0);box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);transform-origin: 0% 100%;animation: shooting-ani 1s infinite ease-out;}.space .star1 {top: -10px;left: 300px;background: #fff;animation-delay: 0.5s;-webkit-animation-delay:0.5s;-moz-animation-delay: 0.5s;}.space .star1:after {border-color: transparent transparent transparent #fff;animation-delay: 0.5s;-webkit-animation-delay:0.5s;-moz-animation-delay: 0.5s;}.space .star2 {top: 100px;left: 200px;background: #fff;animation-delay: 0s;-webkit-animation-delay:0s;-moz-animation-delay: 0s;}.space .star2:after {border-color: transparent transparent transparent #fff;animation-delay: 0;-webkit-animation-delay:0s;-moz-animation-delay: 0s;}.space .star3 {top: -10px;left: 100px;background: #fff;animation-delay: 1.5s;-webkit-animation-delay: 1.5s;-moz-animation-delay: 1.5s;}.space .star3:after {border-color: transparent transparent transparent #fff;animation-delay: 1.5s;-webkit-animation-delay: 1.5s;-moz-animation-delay:1.5s;}.space .star4 {top: 100px;left: 250px;background: #fff;animation-delay: 1.5s;-webkit-animation-delay: 1.5s;-moz-animation-delay: 1.5s;}.space .star4:after {border-color: transparent transparent transparent #fff;animation-delay: 1.5s;-webkit-animation-delay: 1.5s;-moz-animation-delay:1.5s;}.space .star5 {top: 200px;left: 250px;background: #fff;animation-delay: 1.5s;-webkit-animation-delay: 1.5s;-moz-animation-delay: 1.5s;}.space .star5:after {border-color: transparent transparent transparent #fff;animation-delay: 1.5s;-webkit-animation-delay: 1.5s;-moz-animation-delay: 1.5s;}.space .star6 {top: -10px;left: 100px;background: #fff;animation-delay: 1.5s;-webkit-animation-delay: 1.5s;-moz-animation-delay: 1.5s;}.space .star6:after {border-color: transparent transparent transparent #fff;animation-delay: 1.5s;-webkit-animation-delay: 1.5s;-moz-animation-delay: 1.5s;}.space .star7 {top: 100px;left: 200px;background: #fff;animation-delay: 3s;-webkit-animation-delay:3s;-moz-animation-delay: 3s;}.space .star7:after {border-color: transparent transparent transparent #fff;animation-delay: 3s;-webkit-animation-delay:3s;-moz-animation-delay: 3s;}.space .star13 {top: -10px;left: 210px;background: #fff;animation-delay: 3s;-webkit-animation-delay:3s;-moz-animation-delay: 3s;}.space .star13:after {border-color: transparent transparent transparent #fff;animation-delay: 3s;-webkit-animation-delay:3s;-moz-animation-delay: 3s;}.space .star14 {top: -100px;left: 150px;background: #fff;animation-delay: 2s;-webkit-animation-delay:2s;-moz-animation-delay: 2s;}.space .star14:after {border-color: transparent transparent transparent #fff;animation-delay: 2s;-webkit-animation-delay:2s;-moz-animation-delay: 2s;}.space .star15 {top: 200px;left: 250px;background: #fff;animation-delay: 2.5s;-webkit-animation-delay:2.5s;-moz-animation-delay: 2.5s;}.space .star15:after {border-color: transparent transparent transparent #fff;animation-delay: 2.5s;-webkit-animation-delay:2.5s;-moz-animation-delay: 2.5s;}.space .star8 {top: -10px;left: 100px;background: #fff;animation-delay: 3s;-webkit-animation-delay: 3s;-moz-animation-delay: 3s;}.space .star8:after {border-color: transparent transparent transparent #fff;animation-delay: 3s;-webkit-animation-delay: 3s;-moz-animation-delay:3s;}.space .star9 {top: 100px;left: 250px;background: #fff;animation-delay: 4s;-webkit-animation-delay: 4s;-moz-animation-delay: 4s;}.space .star9:after {border-color: transparent transparent transparent #fff;animation-delay: 4s;-webkit-animation-delay: 4s;-moz-animation-delay:4s;}.space .star10 {top: 200px;left: 250px;background: #fff;animation-delay: 5s;-webkit-animation-delay: 5s;-moz-animation-delay: 5s;}.space .star10:after {border-color: transparent transparent transparent #fff;animation-delay: 5s;-webkit-animation-delay: 5s;-moz-animation-delay: 5s;}.space .star11 {top: -10px;left: 100px;background: #fff;animation-delay: 5s;-webkit-animation-delay: 5s;-moz-animation-delay: 5s;}.space .star11:after {border-color: transparent transparent transparent #fff;animation-delay: 5s;-webkit-animation-delay: 5s;-moz-animation-delay: 5s;}.space .star12 {top: -10px;left: 100px;background: #fff;animation-delay: 6s;-webkit-animation-delay: 6s;-moz-animation-delay: 6s;}.space .star12:after {border-color: transparent transparent transparent #fff;animation-delay: 6s;-webkit-animation-delay: 6s;-moz-animation-delay: 6s;}@keyframes star-ani {0% {opacity: 0;transform: scale(0) rotate(0) translate3d(0, 0, 0);-webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);-moz-transform: scale(0) rotate(0) translate3d(0, 0, 0);}50% {opacity: 1;transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);-webkit-transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);-moz-transform: scale(1) rotate(0) translate3d(-300px, 300px, 0);}100% {opacity: 0;transform: scale(1) rotate(0) translate3d(-400px, 300px, 0);-webkit-transform: scale(1) rotate(0) translate3d(-400px, 400px, 0);-moz-transform: scale(1) rotate(0) translate3d(-400px, 400px, 0);}}   </style></head><body><div class="space"><div class="star"></div><div class="star star1"></div><div class="star star2"></div><div class="star star3"></div><div class="star star4"></div><div class="star star5"></div><div class="star star6"></div><div class="star star7"></div><div class="star star8"></div><div class="star star9"></div><div class="star star10"></div><div class="star star11"></div><div class="star star12"></div><div class="star star13"></div><div class="star star14"></div><div class="star star15"></div></div></body>
</html>

纯css写的流星效果，有这几个缺点，节点应该循环出来，每个流星出来的时间，位置，大小等元素应该随机分配的，这几点后期慢慢优化

备注：如您有更好的建议和效果展示，请留言，谢谢！！

纯css实现的流星雨的效果相关推荐

java实现展示框,如何使用纯CSS实现蝴蝶标本的展示框效果
本篇文章给大家带来的内容是关于如何使用纯CSS实现蝴蝶标本的展示框效果 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载每日前端实战系列的全部源代码请从 git ...
用纯css实现优雅的tab页,纯CSS实现Tab页切换效果的方法
纯CSS实现Tab页切换效果的方法发布时间:2020-10-26 09:30:20 来源:亿速云阅读:104 作者:小新小编给大家分享一下纯CSS实现Tab页切换效果的方法,希望大家阅读完这篇文 ...
css三实现ui,纯CSS实现常见的UI效果
原标题:纯CSS实现常见的UI效果转自:掘金 - alphardex 前言切图仔,是大多数前端用来自嘲的称呼.相信很多人平时写页面的时候,大部分时间是在切图和排图,如此往复.这里并不是要否定切图本 ...
【CSS】纯css实现立体摆放图片效果
1. 元素的 width/height/padding/margin 的百分比基准设置一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
Css实现刘海,纯CSS样式写刘海屏效果
1. 效果: 2. 代码: 刘海? :root { --bg--color: #ed4014; } body { background: var(--bg--color); } .top_bar_di ...
css实现提示信息,纯CSS 实现tooltip 内容提示信息效果
Tooltip 也就是内容的提示信息,合理使用可以给用户比较好的体验. 实现方法有很多种,有很多JS 插件,我这里介绍的是纯CSS实现的方法,兼容性也比较靠谱,IE8+均可正常显示.实现方法也非常简单 ...
html怎么把字做成动画效果,利用纯CSS实现动态的文字效果实例
大家可能经常会看到类似酷炫的网站: 在这类网站中能看到,一打开页面,无论是文字还是图片,都随着规定时间的而变化.原理很简单,主要用到CSS中animation属性. 接下来,我以我目前的工程项目为例, ...
纯CSS实现3D正方体动画效果
目录前言正文 1.基本架构 2.书写每个div样式 3.为需要产生动画的一面单独设置样式 4.设置鼠标hover效果 5.优化总结前言纯CSS实现3D正方体动画效果,此方法是通过transf ...
html如何实现立体效果,纯css实现立体摆放图片效果的示例代码
1.元素的 width/height/padding/margin 的百分比基准设置一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举个栗 ...

纯css实现的流星雨的效果

纯css实现的流星雨的效果相关推荐

最新文章

热门文章