java让星星闪烁,js实现星星闪特效

本文实例为大家分享了js实现星星闪特效的具体代码，供大家参考，具体内容如下

效果如下

思路：

1、准备一张星星的图片

2、创建多个星星(可以利用for循坏)

3、求出可视网页的宽高 clientWidth，clientHeight

4、设置星星的随机坐标利用 Math.random()

5、设置星星的缩放可以用css中的scale

6、设置星星的缩放延迟频率 animationDelay

7、给星星加动画(鼠标移动时，星星方法旋转)

代码如下

margin: 0;

padding: 0;

list-style: none;

}

body{

background-color: #000;

}

span{

width: 30px;

height: 30px;

background: url("../images_js/star.png") no-repeat;

position: absolute;

background-size:100% 100%;

animation: flash 1s alternate infinite;

}

@keyframes flash {

0%{opacity: 0;}

100%{opacity: 1;}

}

span:hover{

transform: scale(3, 3) rotate(180deg) !important;

transition: all 1s;

}

window.onload = function () {

// 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 + ')';

// 2.4 频率

var rate = Math.random() * 1.5;

span.style.animationDelay = rate + 's';

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

java让星星闪烁,js实现星星闪特效相关推荐

JS实现星星评分功能实例代码(两种方法)
转载自 JS实现星星评分功能实例代码(两种方法) 一.方法1 1.用到图片 2.结构和样式 <!DOCTYPE html> <html lang="en"&g ...
jquery实现星星闪烁功能
实现星星闪烁功能,其实很简单,来看一下完整的代码实现吧! <style>*{margin:0;padding:0;}#box{width:700px;height:700px;backgr ...
html，canvas——星星闪烁
学习慕课网笔记.点击知识点: 1.如何轮播序列帧 2.canvas API –drawImage() –globalAlpha –save –restore 3.如何添加鼠标事件星星效果: * 1 ...
雪花飘html动画,用纯CSS3的animation制作雪花飘落、星星闪烁、按钮缩放、图片倾斜...
雪花飘落: //雪花飘落 .snowDown { animation: snowDown 3s linear infinite normal; -webkit-animation: snowDown ...
微信小程序实现星星评分-整颗星星评分、半颗星星评分、任意颗星星展示
一.实现整颗星星评分(默认一颗星) 1.效果图 2.准备图片 3.remark.wxml <view class="stars"><view wx:for=&qu ...
java+代码实现+流星雨,js代码实现流星雨 - osc_zls6dx9i的个人空间 - OSCHINA - 中文开源技术交流社区...
一起来看流星雨 var context; var arr = new Array(); var starCount = 800; var rains = new Array(); var rainCo ...
微信小程序星星评价，滑动星星评价+点击星星评价效果
思路:点击星星评价就不用说了,度娘上多得是.我们来说一说滑动评价效果. 1.利用小程序的bindtouchmovechu事件,不知道是啥的,点击这里:https://blog.csdn.net/cra ...
javascript案例27——打印星星、正三角星星、倒三角星星等
一. 案例描述1 打印矩形, 要求每次只能输出一个☆( 采用for). ☆☆☆☆☆ ☆☆☆☆☆ ☆☆☆☆☆ ☆☆☆☆☆ 案例效果演示1 js代码1 var str = '';// 外层控制行数for ...
阿提拉公司 java_Atitit 文件上传架构设计实现机制解决方案实践java php c#.net js javascript c++ python...
Atitit 文件上传架构设计实现机制解决方案实践 java php c#.net js javascript c++ python 1 . 上传的几点要求 2 1 .1. 本地预览 2 1 ...
atitit.复合变量，也就是类似$$a的变量的原理与实现 java c#.net php js
atitit.复合变量,也就是类似$$a的变量的原理与实现 java c#.net php js 1.1. 复合变量,也就是类似$$a的变量,它会进行两次的解释. 1 1.2. 数据库里面的复合变量1 ...

java让星星闪烁,js实现星星闪特效

java让星星闪烁,js实现星星闪特效相关推荐

最新文章

热门文章