纯JS+CSS3制作星星海背景特效
今天刚学的用JS和CSS3制作星星海特效
图片自己用PS简单做的一个星星,png格式
js代码中有必要的步骤注释
主要用到了随机函数,这个很重要,它让界面变得很炫,不是单调的闪烁,星星的变化主要是透明度和大小,动画展开时间不一样,设置了推迟时间,鼠标放到上面还会旋转放大。
另外我在学习的基础上更加完善了代码,在浏览器窗口缩放的同时,星星海特效会再次刷新,以便适应不同大小的屏幕,用户体验更加友好(试了很多次,还遇到bug,还好测试成功,还有是在火狐浏览器测试的)
直接复制可以运行,首先准备一张png格式的星星图片,建立一个名为img的文件夹,不要修改、写错路径或者建错文件夹哦~
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>星星海特效</title><style>body{background: #000;overflow: hidden;}span{display: block;width: 20px;height: 20px;position: absolute;background: url(img/1.png) center center / 20px 20px;animation: flash 1s alternate infinite;}@keyframes flash{0%{ opacity: 0; }100%{ opacity: 1; }}span:hover{transform: scale(2) rotate(180deg) !important;transition: all 1s;}</style>
</head>
<body><script>window.onload = function(){var b = false;star();window.onresize = star;function star(){if( b ){document.body.innerHTML = '';}// 1.求出屏幕的尺寸var screenW = document.documentElement.clientWidth;var screenH = document.documentElement.clientHeight;// 2.动态创建星星for( var i=0; i<150; i++ ){// 2.1创建星星var span = document.createElement('span');document.body.appendChild(span);// 2.2随机的坐标var x = parseInt(Math.random() * screenW);var y = parseInt(Math.random() * screenH);span.style.left = x + 'px';span.style.top = y + 'px';// 2.3随机缩放var scale = Math.random() * 1.5;span.style.transform = 'scale(' + scale + ',' + scale + ')';// 闪烁推迟var rate = Math.random() * 1.5;span.style.animationDelay = rate + 's';} b = true;}}
</script></body>
</html>
纯JS+CSS3制作星星海背景特效相关推荐
- html给背景架渐变,JS和CSS实现渐变背景特效的代码
这篇文章主要介绍了JS和CSS实现的漂亮渐变背景特效代码,包含6个渐变效果,涉及JavaScript针对页面元素属性动态操作的相关技巧,需要的朋友可以参考下 本文实例讲述了JS+CSS实现的漂亮渐变背 ...
- 3d旋转图片制作HTML,js css3制作3D旋转图片切换代码
特效描述:js css3 3D旋转图片切换,js css3酷炫的3D图片旋转切换,3D旋转的图片轮播代码.(不兼容IE6,7,8) 代码结构 1. 引入CSS 2. HTML代码 3D Rotatin ...
- php背景特效代码,JS和CSS实现渐变背景特效的代码
这篇文章主要介绍了JS和CSS实现的漂亮渐变背景特效代码,包含6个渐变效果,涉及JavaScript针对页面元素属性动态操作的相关技巧,需要的朋友可以参考下 本文实例讲述了JS+CSS实现的漂亮渐变背 ...
- 如何让图片自动旋转html5,图片旋转特效 纯HTML5+CSS3制作图片旋转
transform的四个属性: ①旋转--->rotate(参数a),单位deg,表示旋转角度,正数顺时针,负数逆时针. ②缩放--->scale(参数a),单位1,也就是"没有 ...
- 纯HTML5 CSS3制作生日蛋糕
以一个前端开发的身份绘制一个简单的蛋糕庆祝一下今天这个好日子吧,程序员庆生的乐趣与哀愁啊.写的比较简陋,感兴趣的看一下吧. 先发个效果图吧 蛋糕分为三个部分,底部蛋糕,顶层蛋糕和蜡烛部分.HTML的布 ...
- 纯HTML5+CSS3制作生日蛋糕
以一个前端开发的身份绘制一个简单的蛋糕庆祝一下今天这个好日子吧,程序员庆生的乐趣与哀愁啊.写的比较简陋,感兴趣的看一下吧. 先发个效果图吧 蛋糕分为三个部分,底部蛋糕,顶层蛋糕和蜡烛部分.HTML的布 ...
- 用html写出生日蛋糕,纯HTML5+CSS3制作生日蛋糕代码
.birthday .container{ width:600px; height:600px; margin:0px auto; background: #fafafa; border-radius ...
- 用python制作生日蛋糕_纯HTML5+CSS3制作生日蛋糕(代码易懂)
Happy Birthday 生 日 快 乐
- HTML制作手风琴效果,纯js+html和纯css+html制作手风琴效果,css手风琴
纯js+html和纯css+html制作手风琴效果,css手风琴 本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下 一.纯css+html的手风琴效 ...
最新文章
- 如何“漂亮”地解决dota类游戏网络延迟同步?
- java中的内部类总结
- 程序员崩溃的40个瞬间!!!
- 【转】windows程序设计(14):鼠标消息详解
- HTML5+canvas激流勇进网页游戏源码
- python 打包exe_将python文件打包exe独立运行程序方法详解
- SpringBoot 整合Shiro实现动态权限加载更新+Session共享+单点登录
- pymysql安装_Python 新手入门必学模块之:pymysql
- Flash视频播放器 JW PLAYER怎么在网页中运用?
- SKLEARN实例:【用随机森林回归填补缺失值】
- Cadence学习之路:什么是PCB工艺的正片与负片
- Greenplum小把戏 - 官方布尔类型转换为文本类型(bool to text)的进步
- grafana登录密码重置
- CH32F203C8T6 32位增强型低功耗Cortex-M3单片机
- php7 扩展 在哪下载,php7.0 redis扩展下载地址
- Dubbo+Flutter在线交友平台教程第四天 圈子功能实现
- matlab2017调用vgg19,TensorFlow vgg19 图像识别
- the working directory ‘XXX’ does not exist
- 第三组(geomystory)需求经理:头脑风暴+核心竞争力+功能集+NABCD+用例文档+功能说明书+技术说明书...
- [zz from byhh]完整的阿里支付宝面试经过
热门文章
- 按键精灵 删除文件 命令
- UNO卡牌游戏 3.0 成品
- C语言字符串练习-统计重复字符
- vue小程序开发(一) uni-app基本学习
- [CF1045C]Hyperspace Highways
- oracle00205报错,[Oracle] 数据库启动失败报错 ORA-00205: error in identifying control file
- 重塑你的思维,从这里开始
- 【财富空间】小心!传统企业即将卷土重来!
- python爬高考数据_Python简单分析高考数据
- 我所喜欢的游戏,大家都来说说自己喜欢的:D