今天是七夕节、用100行CSS代码下一场流星雨、许一个愿、来一场美丽的邂逅

今天是七夕节、用100行代码下一场流星雨、许一个愿、来一场美丽的邂逅

这个程序的核心使用CSS实现，基本原理就是利用CSS控制若干个div，本例是50个，当然，你可以弄更多的div，不过适当的流星是浪漫，如果流行太多了，恐龙就要灭绝了！

现在说一下基本实现原理，首先用js动态产生若干个div，看下面的代码：

var stars = '';
for(var i = 0; i < 50;i++) {var starTailLengthStyle = "--star-tail-length: " + (5 + Math.random() * 4) + "em;"var topOffsetStyle = "--top-offset:"  + (4 + Math.random() * 100) + "vh;"var fallDurationStyle = "--fall-duration:" + (2 + Math.random() * 10) + "s;"var fallDelay = "--fall-delay:" + Math.random() * 5 + "s;"stars += "<div class='star' style='" +starTailLengthStyle +topOffsetStyle +fallDurationStyle +fallDelay + "'></div>\r\n";;
}
document.body.innerHTML="<div class='stars'>" + stars + "</div>";

这段代码产生了51个div，其中1个div是最外层的div，另外50个div要放在这个div中。最外层div的class是stars，其他50个div的class是star。另外还在style中加入了一些属性，用于随机控制每一颗流行的属性，如尾巴长短，跌落时间等。

接下来在添加下面的样式用来描述stars，用来控制星星整体的初始位置。

.stars {position: fixed;top: 0;left: 0;width: 100%;height: 120%;transform: rotate(-45deg);
}

然后编写下面的star样式，这些样式用来控制每一颗星星的初始状态，var描述相关的变量。

.star {--star-color: var(--primary-color);--star-tail-length: 6em;--star-tail-height: 2px;--star-width: calc(var(--star-tail-length) / 6);--fall-duration: 9s;--tail-fade-duration: var(--fall-duration);position: absolute;top: var(--top-offset);left: 1700px;width: var(--star-tail-length);height: var(--star-tail-height);color: var(--star-color);background: linear-gradient(45deg, currentColor, transparent);border-radius: 50%;filter: drop-shadow(0 0 6px currentColor);transform: translate3d(70em, 0, 0);animation: fall var(--fall-duration) var(--fall-delay) linear infinite, tail-fade var(--tail-fade-duration) var(--fall-delay) ease-out infinite;
}

剩下的就是一些控制流星跌落过程中样式的，如下面的代码用来控制流星尾部在跌落过程中的变化。

@keyframes tail-fade {0%, 50% {width: var(--star-tail-length);opacity: 1;}70%, 80% {width: 0;opacity: 0.6;}100% {width: 0;opacity: 0;}
}

今天是七夕节、用100行CSS代码下一场流星雨、许一个愿、来一场美丽的邂逅相关推荐

100行Python代码，快速搭建一个电影展示网站
学习Python有一段时间了,与其在家无所事事,不如宅家贡献学习两不误.很多人学习 Python都是因为它简单,却功能强大.但是学着学者就从入门到放弃了,主要是没有目标. 比如你想做一个爬虫,或者想写 ...
100行JavaScript代码实现JavaScript
先看效果: 100行JavaScript代码实现经典游戏俄罗斯方块新建一个html文件,复制如下代码,用浏览器打开即可: <!doctype html> <html> < ...
html表格垂直居中的CSS代码,使用3行CSS代码使任何元素垂直居中
在页面设计中,使元素水平居中是比较简单的事情.但是如何使元素垂直居中呢?其实,我们通过3行CSS代码(不包括添加浏览器厂商所需的代码)就可以使任何元素垂直居中.秘诀就是使用transform: tra ...
github怎么为代码着色_如何仅用100行神经网络代码为黑白照片着色
github怎么为代码着色 by Emil Wallner 埃米尔·沃尔纳(Emil Wallner) 如何仅用100行神经网络代码为黑白照片着色 (How to colorize black &am ...
100行php代码实现加密端口转发
2019独角兽企业重金招聘Python工程师标准>>> 如题,这个是100行php代码实现代理上网最终篇,玩具性质,个人用可以,因为1性能不高,2加解密IV重复使用. 用法就是soc ...
100个必会的python脚本-100行Python代码实现自动抢火车票（附源码）
前言又要过年了,今年你不妨自己写一段代码来抢回家的火车票,是不是很Cool.下面话不多说了,来一起看看详细的介绍吧. 先准备好: 12306网站用户名和密码 chrome浏览器及下载chromedr ...
sql行数少于10_如何用少于100行的代码创建生成艺术
sql行数少于10 by Eric Davidson 埃里克·戴维森(Eric Davidson) 如何用少于100行的代码创建生成艺术 (How to Create Generative Art I ...
c语言微信挑一挑编程,100行python代码实现微信跳一跳辅助程序
写在前面分享一下今天下午用python写的"跳一跳"小游戏的辅助程序.之前是准备用树莓派操控一个"机械手指"来代替人的触摸操作,但该方案还在酝酿中,实现了再分 ...
100行python代码做一个程序_100行python代码实现微信跳一跳辅助程序
写在前面分享一下今天下午用python写的"跳一跳"小游戏的辅助程序.之前是准备用树莓派操控一个"机械手指"来代替人的触摸操作,但该方案还在酝酿中,实现了再分 ...

今天是七夕节、用100行CSS代码下一场流星雨、许一个愿、来一场美丽的邂逅

今天是七夕节、用100行CSS代码下一场流星雨、许一个愿、来一场美丽的邂逅相关推荐

最新文章

热门文章