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

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

<!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. 在windows 上的RedisClient 上连接远程linux redis （"jave.net.ConnectException: Connection refused:connect"）

    1.把防火墙禁用掉 2.redis.conf配置文件,注释掉bind 127.0.0.1 3.重启redis服务

  2. C# Dictionary源码剖析---哈希处理冲突的方法有：开放定址法、再哈希法、链地址法、建立一个公共溢出区等

    C# Dictionary源码剖析 参考:https://blog.csdn.net/exiaojiu/article/details/51252515 http://www.cnblogs.com/ ...

  3. 网络IP和网络掩码以及网关的学习

    192.168.10.1/24,192.168.1.1/30是什么意思啊? 表示地址范围你把这些前面的值转换成2进制 就是变成一个32位的地址比如192.168.10.1就变成11000000.101 ...

  4. （22）Ajax的基本使用(实现登录功能和局部刷新以及防止跨站请求伪造攻击)

    Ajax的作用 前后端分离的项目,需要交互,就要通过Ajax来完成交互 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即 ...

  5. 【vue】vue前端项目结构

    [一]项目结构 [二]项目结构释意 目录/文件 说明 build 项目构建(webpack)相关代码 config 配置目录,包括端口号等.我们初学可以使用默认的. node_modules npm ...

  6. itcast-svn

    svn介绍 1.1     svn服务器的工作方式 数据   库  服务 概念   使用数据库,连接服务,服务操作库 独立服务器方式: svnserve 借助Apache方式: mod_dav_svn ...

  7. 一篇文章看懂java反射机制（反射实例化对象-反射获得构造方法,获得普通方法,获得字段属性）

    Class<?> cls = Class.forName("cn.mldn.demo.Person"); // 取得Class对象传入一个包名+类名的字符串就可以得到C ...

  8. <--------------------------构造方法------------------------------>

    1 构造方法 初始化阶段 给对象的属性进行赋值 构造方法 什么是构造方法 : 字面 方法构建时 就使用的方法 对象创建的时候就使用的方法 作用:对象的属性值初始化2 如何用构造方法 修饰符 构造方法名 ...

  9. Java（控制台输出）实现猜数字小游戏

    import java.util.Scanner; import java.util.Random; public class GuestNum{ public static void main(St ...

  10. MySQL Processlist--常见线程状态

    常见SHOW PROCESSLIST返回结果中各种线程状态 ================================================ After createThis occu ...