html css 实现星星海,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

运行效果

代码

Title

*{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;

}

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';

}

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

html css 实现星星海,JS实现星星海特效相关推荐

用HTML+CSS跟简单的js操作完成响应式星巴克首页
前言一个简单的响应式页面,非常适合网页设计,html期末大作业. 如过觉得对你有帮助请关注小编,你的支持是我更新的动力,爱你! 一.成品展示二.代码部分 1.html+简单js <!DOCT ...
html，css响应式布局案例练习--星巴克官网demo
前言继续练习响应式布局,我这次选的是星巴克的官网,进行一个页面的还原,还原程度达不到100%,不过也是可以进行一个学习过程的一个练习,细节很多,本人由于初学阶段,用了一天的时间就写了一个官网首页,兼 ...
各种css形状 CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦等等
CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦等等新出的HTML5新增了不少标签,性能更强,原来的很繁琐的功能几个标签就能实现,同时CSS3也推出,更是一大亮点, ...
CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦
CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦等等新出的html5新增了不少标签,性能更强,原来的很繁琐的功能几个标签就能实现,同时CSS3也推出,更是一大亮点, ...
前端进阶 -css的弱化与js的强化（11）
为什么80%的码农都做不了架构师?>>> web的三要素html, css, js在前端组件化的过程中,比如react,vue等组件化框架的运用,使html 的弱化与 js 的 ...
[css] 鼠标事件css的:hover和js的mouseover有什么区别？
[css] 鼠标事件css的:hover和js的mouseover有什么区别? JavaScript中鼠标事件有:onmouseover和onmouseout: 当鼠标移入和移出时触发事件onmous ...
[css] 除了可以用js跟踪用户信息外，如果不用js，使用纯css怎么做呢？
[css] 除了可以用js跟踪用户信息外,如果不用js,使用纯css怎么做呢? 可以利用 css 的伪类 :hover :active :focus 之类的监听用户行为,然后给指定的url 发送请求. ...
python博客下载本地文件_解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了...
1.今天网上下载一个博客项目,发现本地访问,js,css加载不了. 我想应该是项目上线的安全措施,但是我想调试项目.找到方法如下在settings.py里面编辑添加 STATICFILES_DIR ...
星河经纬加入会员可靠吗_星河湾外墙防水补漏星河湾外墙防水补漏公司星河湾外墙防水补漏师傅星河湾外墙防水补漏施工队电话...
星河湾外墙防水补漏星河湾外墙防水补漏星河湾外墙防水补漏星河湾外墙防水补漏星河湾外墙防水补漏星河湾外墙防水补漏星河湾外墙防水补漏星河湾外墙防水补漏星河湾外墙防水补漏星河湾外墙防水补漏星河湾外墙防水补漏星 ...

html css 实现星星海,JS实现星星海特效

html css 实现星星海,JS实现星星海特效相关推荐

最新文章

热门文章