<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>一起来看流星雨</title> <script> var context; var ...
目录 引言 效果图 源码 案例解析 小问题 结语 引言 平常会做一些有意思的小案例练手,通常都会发到codepen上,但是codepen不能写分析。 所以就在博客上开个案例分享系列,对demo做个剖析。目的以分享为主,然后也希望各路大神能给出改进的想法,在review中提升技术,发现乐趣 效果图 完整效果,请移步 codepen 流星雨案例 纯CSS案例及本篇案例完整源码,请移步The nigh ...
2018-11-01 11:57 4 1872 推荐指数:
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>一起来看流星雨</title> <script> var context; var ...
昨天 UI 提交过来一个登录页的设计稿,要求背景有一个流星雨动画,做完之后觉得挺有趣,分享一下~ 一、流星动画 首先创建一个 div 作为画布 为了防止浏览器分辨率太大而影响视觉效果,给画布加了 max-width 和 margin:auto ...
1.流星雨代码 ...
...
body{background-color:white; margin: 10px 0 0 10px; width:98%;} #allHead{display:none} #allFoot ...
源代码如下(遇上篇烟花代码几乎一样,参数值稍微不一样): ...
人生不可能总是顺心如意,但持续朝着阳光走,影子就会躲在后面,刺眼,却是对的方向 <!doctype html><html> <head> <meta charset="utf-8" /> <title>流星雨</title> ...
都跟别人跑了!直接源码分享: ...