满天星(HTML+CSS+JS)

满天星

思路写注释里了,没有废话,上代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {height: 800px;/* 设置视距 */perspective: 800px;/* 添加相对定位 */position: relative;}</style><script>window.onload = function () {var head = document.querySelector("head");var styleArray = [];//创建事一百五十个动画for (let i = 0; i < 150; i++) { //创建两种不同形态的五角星if (i % 2 == 0) {//使五角星从10px到1000px上下移动,顺时针旋转,大小缩放从1.2倍到0~1随机倍数,沿Y轴旋转一周styleArray.push("@keyframes starRotate" + i +" {\n0% {transform: translateY(10px) rotate(0deg) scale(1.2); " +"}\n100% {transform: translateY(1000px) rotate(360deg) " + "scale(" + Math.random().toFixed(1) + ")" + " rotateX(360deg);}}\n");} else {//使五角星从10px到1000px上下移动,逆时针旋转,大小缩放从1.2倍到0~1随机倍数,沿Y轴旋转一周styleArray.push("@keyframes starRotate" + i +" {\n0% {transform: translateY(10px) rotate(360deg) scale(1.2);" +"}\n100% {transform: translateY(1000px) rotate(0deg) " + "scale(" + Math.random().toFixed(1) + ")" + " rotateY(360deg);}}\n");}}var styleNode = document.querySelector("style");styleNode.innerHTML += styleArray.join('\n'); //把数组转为字符串以换行隔开head.appendChild(styleNode);//创建事一百五十个星星,对应一百五十个for (let i = 0; i < 150; i++) {var img = document.createElement("img");document.body.appendChild(img);img.style.position = "absolute"; //添加绝对定位img.style.transformStyle = "preserve-3d"; //开启3dimg.style.left = "" + (Math.random() * Math.ceil(document.body.offsetWidth + "")) + "px";img.src = "无标题.png"; //你的图片路径img.style.width = "50px";img.style.height = "50px";img.style.top = "-50px";img.style.animation = "starRotate" + i + " " + Math.ceil(Math.random() * (20 - 10 + 1) + 10) +"s linear infinite";}}</script>
</head><body>
</body></html>

效果如图:

满天星(HTML+CSS+JS)相关推荐

【转】Maven Jetty 插件的问题（css/js等目录死锁）的解决
Maven Jetty 插件的问题(css/js等目录死锁,不能自动刷新)的解决: 1. 打开下面的目录:C:\Users\用户名\.m2\repository\org\eclipse\jetty\j ...
html及js试题,HTML+css+js试题..docx
HTMLcssjs试题. HTML+CSS+JS面试题一.单项选择(165题)1.HTML是什么意思?A)高级文本语言B)超文本标记语言C)扩展标记语言D)图形化标记语言2.浏览器针对于HTML文档起 ...
css/js压缩工具
css/js压缩工具 http://ajaxmin.codeplex.com/
html css js书写规范
无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考. 规范目的: 为提高团队协作效率, 便于后台人员添 ...
用 Flask 来写个轻博客 (28) — 使用 Flask-Assets 压缩 CSS/JS 提升网页加载速度
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录目录前文列表扩展阅读 Flask-Assets 将 Flask-Assets 应用 ...
前端 css+js实现返回顶部功能
描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: 1 <div> 2 <button οnclick="returnTop()& ...
web静态资源访问规则||webjars的访问配置——webjars是maven库里面对css js image打的一个jar包
Html css js image txt web项目中放在 Webapp 在springboot项目中静态资源放置的位置 Springboot默认的静态资源目录 (1)在src/main ...
asp.net MVC发布iis无法加载css,js和图片
今天真够郁闷的,遇到了在本地能运行的项目到了iis服务器那里就不行了,无法加载css,js和图片,这里说清楚一下先,关于asp.net 的MVC中这样的情况其实不少,但是之前遇到的是在visual s ...
采用CSS+JS实现简洁的滑动导航栏_网页代码站(www.webdm.cn)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...

满天星(HTML+CSS+JS)

满天星

满天星(HTML+CSS+JS)相关推荐

最新文章

热门文章