Javascript特效：星星海特效

知识点

CSS使用@keyframes自定义动画，使用animation调用自定义动画
opacity 透明度。从 0.0 （完全透明）到 1.0（完全不透明）
CSS中transform
animation-delay 属性定义动画何时开始。

求屏幕尺寸

var 宽 = document.documentElement.clientWidth;
var 高 = document.documentElement.clientHeight;

JS创建节点
JS在某元素后追加节点
```
appendChild()
```
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>

Javascript特效：星星海特效相关推荐

html css 实现星星海,JS实现星星海特效
本文实例为大家分享了JS实现星星海特效的具体代码,供大家参考,具体内容如下知识点 1.CSS使用@keyframes自定义动画,使用animation调用自定义动画 2.opacity 透明度.从 ...
纯JS+CSS3制作星星海背景特效
今天刚学的用JS和CSS3制作星星海特效图片自己用PS简单做的一个星星,png格式 js代码中有必要的步骤注释主要用到了随机函数,这个很重要,它让界面变得很炫,不是单调的闪烁,星星的变化主要是透明 ...
8个超棒的使用javascript开发的视觉特效网站
日期:2012-8-17 来源:GBin1.com 随着flash的落寞及其HTML5和CSS3的发展,更多的网站开始使用javascript,CSS3和HTML5来开发炫酷的特效.今天我们挑选了8 ...
html图片快速轮播特效代码,轻松实现javascript图片轮播特效
本文实例介绍了javascript图片轮播特效的详细代码以及实现思路,分享给大家供大家参考,具体内容如下还是先来看一看效果图: 具体代码: 一.HTML代码分析 A版是一款手机DOTA应用,它涵盖了 ...
php js特效代码如何用,Javascript实现吸顶特效（代码示例）
本篇文章给大家带来的内容是Javascript实现吸顶特效(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 知识点 1.scroll家族和offset家族的结合运用 2. ...
php中实现图片自动轮播,轻松实现javascript图片轮播特效_javascript技巧
本文实例介绍了javascript图片轮播特效的详细代码以及实现思路,分享给大家供大家参考,具体内容如下还是先来看一看效果图: 具体代码: 一.HTML代码分析此效果的层次结构比较清楚: 1. c ...
html5 求爱,一个JavaScript的求爱小特效
这里面做了一个JavaScript的求爱小特效,效果如下: 不仅能出现下面的图的效果,还可以让这个图形跟随着鼠标转动哦,这里面只是一个简单的没有修饰的小例子,基于这个例子可以让求爱,更加好玩了.闷骚男 ...
2.CCGridAction(3D效果)，3D反转特效，凸透镜特效，液体特效，3D翻页特效，水波纹特效，3D晃动的特效，扭曲旋转特效，波动特效，3D波动特效
1 类图组织 2 实例 CCSprite * spr = CCSprite::create("HelloWorld.png"); spr->setPosition(cc ...
Silverlight开发历程—模糊特效与投影特效
BlurEffect模糊特效 BlurEffect模糊特效,它可以产生类似相机的调整焦距的效果,根据属性值的不同可以产生不同的Blur效果常用属性为Radius,下面的例子,是对一个UI的模糊: XA ...

Javascript特效：星星海特效

知识点

运行效果

代码

Javascript特效：星星海特效相关推荐

最新文章

热门文章