当前位置: 首页 > 编程笔记 >

JS实现星星海特效

施阳夏
2023-03-14
本文向大家介绍JS实现星星海特效,包括了JS实现星星海特效的使用技巧和注意事项,需要的朋友参考一下

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍js实现飞入星星特效代码,包括了js实现飞入星星特效代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现飞入星星特效代码,分享给大家供大家参考。 具体实现代码如下: 希望本文所述对大家的javascript程序设计有所帮助

  • 本文向大家介绍js实现漫天星星效果,包括了js实现漫天星星效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了漫天小星星效果的实现代码,供大家参考,具体内容如下 效果图: 实现代码: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍javascript实现随机显示星星特效,包括了javascript实现随机显示星星特效的使用技巧和注意事项,需要的朋友参考一下 本文实例讲解了javascript实现随机显示星星特效的详细代码,具体内容如下 (1)网页背景是黑的  (2)星星随机大小:min=15,max=80  (3)星星的坐标是随机的:               x_left=0,x_right=(浏览器宽-

  • 本文向大家介绍js实现商城星星评分的效果,包括了js实现商城星星评分的效果的使用技巧和注意事项,需要的朋友参考一下 在这里和朋友们分享一个使用js实现商城星星评分的效果,希望能给大家点帮助,当然更好的特效还有待大家完善。 html如下: css样式: 最后js调用如下: 以上就是本文的全部内容,希望对大家的学习jquery程序设计有所帮助。

  • 本文向大家介绍js实现的星星评分功能函数,包括了js实现的星星评分功能函数的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现的星星评分功能函数。分享给大家供大家参考,具体如下: 希望本文所述对大家JavaScript程序设计有所帮助。

  • 本文向大家介绍Silverlight实现星星闪烁动画,包括了Silverlight实现星星闪烁动画的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Silverlight实现星星闪烁动画展示的具体代码,供大家参考,具体内容如下 原理很简单,生成1000个圆,从随机数来布置它们的位置,通过动画来处理它们的透明度,动画时长也是随机生成。  1、创建图形数组并设置背景透明,渐变笔触,大小等,