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

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

<!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. NodeServices

    NodeServices https://www.cnblogs.com/stulzq/p/10535310.html 一.前言 在 .NET Framework 时,我们可以通过V8.NET等组件来 ...

  2. java-多态中成员访问特点-父类引用指向子类对象

    多态前提: - 要有继承关系. - 要有方法重写. - 要有父类引用指向子类对象. 1.成员变量:编译看左边(父类),运行看左边(父类) 2.成员方法:编译看左边(父类),运行看右边(子类),动态绑定 ...

  3. 神坑，使用gcc对opencv重编译

    工具 cmake-3.9.1 opencv-3.3.0  gcc-6.3.0 前几天为了装eclipse的CDT,把minggw里的make改了,今天突然想学opencv,可是只找到了vc版本,千辛万 ...

  4. （20）jQuery的文档操作（创建，添加、设置样式和删除等）

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>jq ...

  5. [codeforces round#475 div2 ][C Alternating Sum ]

    http://codeforces.com/contest/964/problem/C 题目大意:给出一个等比序列求和并且mod 1e9+9. 题目分析:等比数列的前n项和公式通过等公比错位相减法可以 ...

  6. pycharm远程调试配置

    目录: 安装pycharm 配置pycharm远程调试 使用测试 一.安装pycharm(略) 二.配置pycharm远程调试 1.菜单--->Tools--->Deployment--- ...

  7. day5 python学习

    本日主要讲了列表的一些操作 1.列表的增 ret=['wang','taibai','alxe','ritian'] ret.append("wusir") print(ret) ...

  8. WinForm中执行JS代码（多种方法）

    方法一 使用微软官方组件Interop.MSScriptControl 1.msscript.ocx下载的地址   http://www.microsoft.com/downloads/details ...

  9. 初始Openwrt

    系统结构 在上一章我们已经完成了刷机工作,这个时候系统进行了首次启动,并且格式化了它的"可写"分区.那么在设备里分区到底是怎么样进行的呢?我们首先需要知道:不同的处理器下OpenW ...

  10. Apache Kafka监控之Kafka Web Console

    Kafka Web Console:是一款开源的系统,源码的地址在https://github.com/claudemamo/kafka-web-console中.Kafka Web Console也 ...