本次主要是来实现上面的星空效果：在黑色的背景下面，有大小不一的星星在闪烁，当鼠标悬浮时，星星放大并旋转。

首先，我们需要一个大的夜空容器和放星星的容器：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{

            margin: 0;

            padding: 0;

            list-style: none;

        }

        body{

            background-color: #000;

        }

        span{

            width: 30px;

            height: 30px;

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

            position: absolute;

            background-size:100% 100%;

           }

    </style>

</head>

<body>

<span></span>

</body>

</html>

此时在大背景下有一颗星星，但该星星是固定的，我们需要通过css添加闪烁的效果：

span{

    animation: flash 1s alternate infinite;

}

@keyframes flash {

    0%{opacity: 0;}

    100%{opacity: 1;}

}

目标是在不同的地方显示随机大小的星星，所以，我们需要做以下几步操作：

  • 计算出星星可显示位置
  • 循环生成多个星星，即span
  • 利用随机数生成星星的定位值，使其在不同位置显示
  • 利用随机数计算星星的缩放比，在界面中显示不同大小的星星
<script>

    window.onload = function () {

        //屏幕的尺寸

        var screenW = document.documentElement.clientWidth;

        var screenH = document.documentElement.clientHeight;

        //动态创建多个星星

        for(var i=0; i<150; i++){

            var span = document.createElement('span');

            document.body.appendChild(span);

            //位置随机

            var x = parseInt(Math.random() * screenW);

            var y = parseInt(Math.random() * screenH);

            span.style.left = x + 'px';

            span.style.top = y + 'px';

             //大小随机

            var scale = Math.random() * 1.5;

            span.style.transform = 'scale('+ scale + ', ' + scale + ')';

        }

    }

</script>

此时界面中已经出现了上面的效果，但是此时所有星星的闪烁频率是相同的，因为在用css3写样式的时候，我们只定义了相同的执行时间，所以我们可以给不同的星星的动画添加不同的延迟时间，这样视觉上就不会出现所有的一起闪烁的效果了。

var rate = Math.random() * 1.5;

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

最后就是添加鼠标悬浮事件了，当鼠标悬浮时，星星旋转并放大，我们也可以用css实现。

span:hover{

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

    transition: all 1s;

  }

至此，我们就完成了最开始想要的效果了，完整代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{

            margin: 0;

            padding: 0;

            list-style: none;

        }

        body{

            background-color: #000;

        }

        span{

            width: 30px;

            height: 30px;

            background: url("images/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;

        }

    </style>

</head>

<body>

<span></span>

<script>

    window.onload = function () {

        // 屏幕的尺寸

        var screenW = document.documentElement.clientWidth;

        var screenH = document.documentElement.clientHeight;

        // 2. 动态创建多个星星

        for(var i=0; i<150; i++){

            var span = document.createElement('span');

            document.body.appendChild(span);

            //位置随机

            var x = parseInt(Math.random() * screenW);

            var y = parseInt(Math.random() * screenH);

            span.style.left = x + 'px';

            span.style.top = y + 'px';

            //大小随机

            var scale = Math.random() * 1.5;

            span.style.transform = 'scale('+ scale + ', ' + scale + ')';

            //频率随机

            var rate = Math.random() * 1.5;

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

        }

    }

</script>

</body>

</html>

下载完整详细代码：点这里

js实现星空效果的更多相关文章

  1. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  2. 用js实现动画效果核心方式

    为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...

  3. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

    虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...

  5. 原生JS实现分页效果1.0

    不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...

  6. WPF星空效果

    效果 前阵子看到ay的蜘蛛网效果和知乎的登录页背景,觉得效果很酷.自己也想写一个.于是写着写着就变成这样了.少女梦幻的赶脚有木有.我这有着一颗少女心的抠脚大汉 实现思路 分为两个部分: 1.星星无休止 ...

  7. 使用JS实现手风琴效果

    想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...

  8. js弹窗登录效果(源码)--web前端

    1.JS弹窗登录效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  9. 原生JS实现弹幕效果

    纯属无聊写的,可能有很多问题,欢迎批评指教. 效果图:图一是预设的一些弹幕,图二是自己发射的弹幕,效果是一样的.   首先是弹幕的位置,是要从最右滑到最左,为了防止随机高度弹幕会覆盖的问题,设置了通道 ...

随机推荐

  1. python django day 4 database

    django-admin.py startproject learn_models # 新建一个项目 cd learn_models # 进入到该项目的文件夹 django-admin.py star ...

  2. 用java的io流，将一个文本框的内容反转

    import java.io.*; import java.util.ArrayList; public class test04 { public static void main(String a ...

  3. ie6,ie7下a标签无法点击（转载）

    前几天在做一个网站的引导页面,因为都是用图片,所以按钮需要用空a标签来做,发现a标签在IE6与IE7中点击无效中点击不了,其他浏览器都正常.一开始以为是z-index的问题,但不论z-index设置多 ...

  4. tomcat部署项目（war文件）

    首先配置jdk环境 下载jdk 例如,我将jdk安装在d盘jdk目录下 配置系统环境 新建系统变量JAVA_HOME值为D:\jdk 新建系统变量CLASS_HOME值为 .%JAVA_HOME%\l ...

  5. IntelliJ IDEA 快捷键说明大全（中英对照、带图示详解）

    因为觉得网络上的 idea 快捷键不够详尽,所以特别编写了此篇文章,方便大家使用 idea O(∩_∩)O~ 其中的英文说明来自于 idea 的官网资料,中文说明主要来自于自己的领会和理解,英文说明只 ...

  6. 使用btrace需要注意的几个问题

    1. @ProbeClassName String clazz 此处String不能写为java.lang.String 2. location=@Location(Kind.RETURN) publ ...

  7. oracle-rman-1

    备份脚本 ############################# [oracle@rac02 backup_scripts]$ cat rman_bus_level_0_bk.sh######## ...

  8. ES5新增数组方法

    forEach/map   every/some  indexOf/lastIndexOf  filter reduce Array.isArray

  9. ~ # himm -sh: himm: not found的解决方法

    ls /bin发现没有himm 海思根文件默认没有把himm工具集成在bin里,但是在sdk中 /home/swann/Hi3516CV300_SDK_V1.0.3.0/osdrv/tools/boa ...

  10. hadoop mapreduce 简单例子

    本例子统计 用空格分开的单词出现数量(  这个Main.mian 启动方式是hadoop 2.0 的写法.1.0 不一样 ) 目录结构: 使用的 maven : 下面是maven 依赖. <de ...