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. ML面试1000题系列（31-40）

    本文总结ML面试常见的问题集 转载来源:https://blog.csdn.net/v_july_v/article/details/78121924 31.下列哪个不属于CRF模型对于HMM和MEM ...

  2. 实践中了解到的CSS样式的优先级

    CSS三大特性——继承.优先级和层叠.这是在精通CSS中重点强调的内容. 继承即子类元素继承父类的样式,常用的可继承样式有:color,font,line-height,list-style,text ...

  3. Pycharm安装package报错：AttributeError: module 'pip' has no attribute 'main'

    Pycharm安装package报错:AttributeError: module 'pip' has no attribute 'main' 确认pip已经升级到目前最新版本了. 在网上搜寻后,解决 ...

  4. 使用DIV+CSS布局网站的优点和缺陷

    随着WEB2.0标准化设计理念的普及,国内很多大型门户网站已经纷纷采用DIV+CSS制作方法,从实际应用情况来看,此种方法绝对好于表格制作页面的方法. 如今大部分网站仍然采用表格嵌套内容的方式来制作网 ...

  5. Vue源码探究-虚拟DOM的渲染

    Vue源码探究-虚拟DOM的渲染 在虚拟节点的实现一篇中,除了知道了 VNode 类的实现之外,还简要地整理了一下DOM渲染的路径.在这一篇中,主要来分析一下两条路径的具体实现代码. 按照创建 Vue ...

  6. iOS 自定义Tabbar实现push动画隐藏效果

    http://wonderffee.github.io/blog/2013/08/07/hide-custom-tab-bar-with-animation-when-push/ 在之前的一篇文章(链 ...

  7. POJ1655 Balancing Art

    Balancing Act Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 13865   Accepted: 5880 De ...

  8. 云服务器 ECS Linux Web 环境配置站点的方法

    摘自:https://help.aliyun.com/knowledge_detail/41100.html ECS Linux 系统一键安装 Web 环境<专业版>下 Tomcat 添加 ...

  9. 创建一个User类

    1.用户模型—User类 用户模型或者叫账户模型,为什么这么说看下面代码 using System; using System.ComponentModel.DataAnnotations; name ...

  10. 【JZOJ4901】【NOIP2016提高A组集训第18场11.17】矩阵

    题目描述 他是一名普通的农电工,他以一颗无私奉献的爱岗敬业之心,刻苦钻研业务,以娴熟的技术.热情周到的服务赢得了广大客户的尊敬和赞美.他就是老百姓称为"李电"的李春来. 众所周知, ...