GIF图有点大，网速慢的或将稍等片刻或可浏览本人的制作的demo。

Demo : 点击查看

HTML:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Glunefish</title>

    <link rel="stylesheet" href="css/style.css">

</head>

<body>

    <div id="F-dynamicbg-box">

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

    </div>

</body>

</html>

CSS:

    * {

        margin:; padding:; border: none; outline:;

    }

    body{

        width: 100vw;

        height: 100vh;

        background: url(img/bg.png) no-repeat;

        background-size: cover;

    }

    #F-dynamicbg-box {

        width: 100vw;

        height: 100vh;

        position: absolute;

        top:;

        left:;

        overflow: hidden;

    }

    #F-dynamicbg-box > div {

        z-index: -9999;

        background-color: rgba(255,255,255,.1);

        position: absolute;

        top: 105vh;

        animation: dynamicDiv 30s linear infinite;

    }

    #F-dynamicbg-box > div:nth-of-type(1) { animation-delay: 1s }

    #F-dynamicbg-box > div:nth-of-type(2) { animation-delay: 3s }

    #F-dynamicbg-box > div:nth-of-type(3) { animation-delay: 6s }

    #F-dynamicbg-box > div:nth-of-type(4) { animation-delay: 9s }

    #F-dynamicbg-box > div:nth-of-type(5) { animation-delay: 12s }

    #F-dynamicbg-box > div:nth-of-type(6) { animation-delay: 4s }

    #F-dynamicbg-box > div:nth-of-type(7) { animation-delay: 15s }

    #F-dynamicbg-box > div:nth-of-type(8) { animation-delay: 18s }

    #F-dynamicbg-box > div:nth-of-type(9) { animation-delay: 20s }

    #F-dynamicbg-box > div:nth-of-type(10) { animation-delay: 16s }

    @keyframes dynamicDiv {

        form { top: 105vh; transform: scale(1.2); }

        to { top: -13vh; transform: scale(1) rotate(60deg); }

    }

JS:( JS初始化div形态 )

        var box = document.getElementById('F-dynamicbg-box'),

            div = box.getElementsByTagName('div'),

            math = [0,1];for (var i=0;i<div.length;i++) {

                math[1] = F_getSJS(100,40,9)                          F_getSJS 请移步博客之前的取随机数了解

                if(math[1] != math[2]){

                    div[i].style.width = math[1] + 'px';

                    div[i].style.height = math[1] + 'px';

                    math[2] = math[1];

                }

            }

            for(var i=0;i<div.length;i++){

                div[i].style.left = F_getSJS(85,15,8) + 'vw';

                div[i].style.transform = 'rotate(' + F_getSJS(360,5,9) + 'deg)';

            }

【CSS3 + 原生JS】上升的方块动态背景的更多相关文章

  1. 初探原生js根据json数据动态创建table

    初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...

  2. HTML 5 +CSS3 + 原生js 做（雪花全屏飘落 + 3d旋转图）

    原文:HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图) 3d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 pers ...

  3. 【CSS3 + 原生JS】移动的标签

    左图为本博客右侧截取的GIF图,右图为代码效果 HTML: <!DOCTYPE html> <html lang="en"> <head> &l ...

  4. 原生js代码挑战之动态添加双色球

    var ballArr = []; //存放已有的红球,用来排除重复和排序window.onload = function(){ var btn = document.createElement(&q ...

  5. 从零开始手把手教你使用原生JS+CSS3实现幸运水果机游戏

    项目体验地址 免费视频教程 游戏介绍 幸运水果机是一款街机游戏,游戏界面由24个方格拼接成一个正方形,每个方格中都有一个不同的水果图形,方格下都有一个小灯.玩家使用游戏币选择希望押注的目标,按下开始后 ...

  6. 基于CSS3动态背景登录框代码

    基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  7. 原生js与css3结合的电风扇

    最近学习了css3,就琢磨做些东西练练手,下面是自己写的一个电风扇,使用了原生js中的定时器和css3的一些属性 <!doctype html> <html lang="e ...

  8. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  9. 瀑布流的三种实现方式（原生js+jquery+css3）

    前言 项目需求要弄个瀑布流的页面,用的是waterfall这个插件,感觉还是可以的,项目赶就没自己的动手写.最近闲来没事,就自己写个.大致思路理清楚,还是挺好实现的... 原生javascript版 ...

随机推荐

  1. django中模型

    一.django需要使用数据库,则需要安装对应的驱动,比如mysql,则需要安装mysqlclient驱动: pip install mysqlclient 二.在settings.py文件中配置数据 ...

  2. pycharm多行批量缩进和反向缩进快捷键

    在 VS, PYCHARM 中只要 拉选块之后,按下tab键,整个块就会缩进 按下 shift + tab 就会反向缩进

  3. opencv2.4.9配置+VS2013

    参见:浅墨的(红的的为变动部分) http://blog.csdn.net/poem_qianmo/article/details/19809337 本系列文章由@浅墨_毛星云 出品,转载请注明出处. ...

  4. SVN经常使用操作

    版权声明:本文为博主原创文章.转载请注明出处. https://blog.csdn.net/Jerome_s/article/details/27950055 Subversion(简称svn)安装 ...

  5. <第一周>降维

    PCA 矩阵的主成分就是其协方差矩阵对应的特征向量,按照对应的特征值大小进行排序,最大的特征值为第一主成分,以此类推 主要过程 对所有样本进行中心化 计算样本的协方差矩阵 XX．T 对协方差矩阵做特征 ...

  6. vsync信号产生与分发

    以下分析基于android 4.4代码 vsync信号的产生.分发涉及到以下几个类,先主要了解下他们各自的功能: HWComposer:产生hardware vsync,post fb VSyncTh ...

  7. linux服务器配置防火墙使用端口

    重启后生效方法: 1.开启: chkconfig iptables on 2.关闭: chkconfig iptables off  即时生效,重启后失效 : 1.开启: service iptabl ...

  8. 【JZOJ4831】【NOIP2016提高A组集训第3场10.31】方程式

    题目描述 数据范围 解法 枚举根之后,使用大除法. 代码 #include<stdio.h> #include<iostream> #include<string.h&g ...

  9. hdu1525 博弈

    /* n%m==0 n状态 n>=2*m 先手决定谁来面对当前的状态,并且可以知道状态,所以先手必胜. */ #include<stdio.h> int min(int x,int ...

  10. 谷歌好样的，把 www 也干掉了

    谷歌好样的,把 www 也干掉了 继把 http 干掉后,这次 Chrome 76 连 https 和 www 都一起干掉了. 喜欢简洁,但这个功能演化过程可不简单. 最早觉得把 http 干掉很不方 ...