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

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

<!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. Structural Features for Predicting the Linguistic Quality of Text: Applications to Machine Translation, Automatic Summarization and Human-Authored Text -paper

    abstract句子结构是文本语言质量的关键,我们记录了以下实验结果:句法短语统计和其他结构特征对文本方面的预测能力.手工评估的句子fluency流利度用于机器翻译评估和文本摘要质量的评估是黄金准则. ...

  2. Java异常处理的方法

    1.异常概述在程序中,错误可能产生于程序员没有预料到的各种情况,或者是超出了程序员可控制范围的环境因素,如用户的坏数据.试图打开一个根本不存在的文件等.在Java中这种在程序运行是可能出现的一些错误称 ...

  3. Install Java on Ubuntu server

    准备工作 a) 获得超级用户权限 关于超级用户访问权限的说明: 要将 Java 安装在系统级位置(例如 /usr/java),则必须以超级用户身份登录,从而获得必要的权限.如果您不具有超级用户访问权限 ...

  4. （3）diango的架构

    MVC架构:主流的web都是MVC架构 M 就是模型层指得是model,对应的就是数据库操作层 V 就是视图,和MTV架构的视图层不是一个概念,对应MTV架构中的T C 控制器,根据请求地址执行什么代 ...

  5. 实验吧—安全杂项——WP之 女神

    点击链接下载压缩文件解压后得到 打开TXT文档: 能看出是base64,这么长,那就是转成图片喽~ 地址:http://www.vgot.net/test/image2base64.php? 然后就是 ...

  6. mysql条件查询-排除null ---oracle、mysql 区分总结

    ' AND IFNULL(c.`COURSE_NO`,'-1') != '-1' ;

  7. 更改MySQL数据库的编码为utf8mb4

    原文:http://blog.csdn.net/woslx/article/details/49685111 utf-8编码可能2个字节.3个字节.4个字节的字符,但是MySQL的utf8编码只支持3 ...

  8. confluence 新tab 页面打开 kibana short link

    confluence 新tab 页面打开 https://confluence.atlassian.com/confkb/how-to-force-links-to-open-in-a-new-win ...

  9. BizDevOps — the true value proposition of workflow engines

    转自:https://blog.bernd-ruecker.com/bizdevops-the-true-value-proposition-of-workflow-engines-f342509ba ...

  10. 04C++const增强、枚举的增强

    #include <iostream> int main(void) { //const定义常量--->const意味着只读 const int a; int const b; // ...