JS实现星星海特效
2019-12-25 12:03
2206 查看
本文实例为大家分享了JS实现星星海特效的具体代码,供大家参考,具体内容如下
知识点
1.CSS使用@keyframes自定义动画,使用animation调用自定义动画
2.opacity 透明度。从 0.0 (完全透明)到 1.0(完全不透明)
3.CSS中transform
4.animation-delay 属性定义动画何时开始。
5.求屏幕尺寸
var 宽 = document.documentElement.clientWidth; var 高 = document.documentElement.clientHeight;
6.JS创建节点
7.JS在某元素后追加节点
appendChild()
8.UnderScore.js通过_调用其中的API
运行效果
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="UnderScore.js"></script> <style> *{margin: 0;padding-top: 0} body{background-color: #000} span{ width: 30px; height: 30px; background: url("star.png") no-repeat; position: absolute; background-size: contain; animation: flash 1s alternate infinite; } @keyframes flash{ 0%{opacity: 0} 25%{opacity: 0.25} 50%{opacity: 0.5} 75%{opacity: 0.75} 100%{opacity: 1} } span:hover{ transform: scale(3, 3) rotate(180deg) !important; transition: all 1s; } </style> </head> <body> <script> window.onload = function (ev) { // 1. 求出屏幕尺寸 var screenWidth = document.documentElement.clientWidth; var screenHeight = document.documentElement.clientHeight; // 2. 动态创建10颗星星 for (var i = 0; i < 200; i++) { // 2.1 创建星星 var span = document.createElement('span'); document.body.appendChild(span); // 2.2 随即坐标 var x = parseInt(_.random(0, screenWidth)); var y = parseInt(_.random(0, screenHeight)); span.style.left = x +'px'; span.style.top = y + 'px'; // 2.3 随机缩放 var scale = _.random(0, 1.5); span.style.transform = 'scale('+scale+','+scale+')'; // 2.4 频率 var rate = _.random(0, 1.5); span.style.animationDelay = rate + 's'; } } </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- 利用canvas实现的JS画圆圈特效代码
- JS实现转动随机数抽奖的特效代码
- js实现DOM走马灯特效的方法
- js实现tab页切换选项卡代码特效
- JS实现仿QQ聊天窗口抖动特效
- 原生js和jquery实现图片轮播特效
- js实现商品抛物线加入购物车特效
- 原生JS实现的放大镜特效示例【测试可用】
- js+css3实现立体式图片旋转特效
- 浅谈相同动画特效C3和JS实现的效率性
- 功能搜索js+flash实现手写输入功能特效
- js实现图片和链接文字同步切换特效的方法
- js实现小特效 下拉菜单的折叠
- js实现点击文本框显示日期选择器特效代码分享
- js实现无缝滚动特效
- JS实现悬浮移动窗口(悬浮广告)的特效
- js实现图片无缝滚动特效
- [js脚本实现]图片向上滚动并且有停顿的特效
- JS实现随机乱撞彩色圆球特效的方法
- js实现鼠标绘制层拖拽特效