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

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

<!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. Formal Grammars of English -10 chapter（Speech and Language Processing）

    determiner  限定词 DET propernoun 专有名词 NP (or noun phrase) mass noun 不可数名词 Det Nouns 限定词名词 relative pro ...

  2. 自定义video样式

    和朋友聊天说到了video自定义样式问题,今天抽空简单试验了一下,下面贴上代码. dom结构如下: <video id="video1" width="399&qu ...

  3. PTA——统计区间内质数

    PTA 7-33 统计素数并求和 #include<stdio.h> #include<math.h> int prime(int p); int main() { int m ...

  4. MyBatis sql语句使用总结

    MyBatis中Like语句使用总结 oracle数据库: SELECT * FROM user WHERE name like CONCAT('%',#{name},'%') 或 : SELECT ...

  5. Linux，IDS入侵防御系统

    https://www.comparitech.com/net-admin/network-intrusion-detection-tools/11 2018年的顶级入侵检测工具 https://op ...

  6. mongodb 通过mongodump来备份Sharded Cluste分片集群

    1,mongodb所有组件官方文档地址:https://docs.mongodb.com/manual/reference/command/,所有的基础组件都在里面,包括备份恢复的mongodump. ...

  7. jenkins安装教程

    首先部署java环境 然后部署tomacat(部署之后无需开启tomcat服务) sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenk ...

  8. js语言中的新发现和一些总结

    js中定义变量加var和不加var的区别 原创 2016年09月01日 10:17:33 标签: js 3658 这个问题其实我在面试的时候有被问到过,当时我记得我回答的很模糊,面试官看到我好像不太清 ...

  9. awesome-workflow-engines

    转自:https://github.com/meirwah/awesome-workflow-engines awesome-workflow-engines A curated list of aw ...

  10. nakadi-ui nakadi event broker 的可视化UI工具

    nakadi 是一款很不错的基于fafka 开发的event broker ,我们只需要使用http 请求就可以调用kafka 方便的发布订阅功能 环境准备 docker-compose 文件 ver ...