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. js的各种获取大小

    相信大家也经常会被js的获取大小搞得头昏脑胀,到底应该用哪种方式获取才是我要的那种大小呢 好啦,在此我帮大家整理好我知道的那些. window.screen.availHeight  获取的是当前电脑 ...

  2. SVN 打包时，出现File not found: transaction '148-48', path ''https://xxxxxx/svn/xxxxx/tag/2017-9-30'

    svn打包时,出现错误如下: 解决办法: 在SVN目录结构中,增加tag这个目录.

  3. iOS 7: 如何为iPhone 5s编译64位应用

    随着iPhone 5S的推出,大家开始关心5S上所使用的64位CPU A7. 除了关心A7的性能以外,大家还会关心一个问题,那就是使用A7的64位系统对应用有没有什么要求.特别是应用开发者,大家都比较 ...

  4. JQuery-- 实例:小米左右切图,淡入淡出,自动，小圆点触发轮播图

    示意图: demo <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. 数据挖掘算法R语言实现之决策树

    数据挖掘算法R语言实现之决策树 最近,看到很多朋友问我如何用数据挖掘算法R语言实现之决策树,想要了解这方面的内容如下: > library("party")导入数据包 > ...

  6. 【JZOJ4791】【NOIP2016提高A组模拟9.21】矩阵

    题目描述 在麦克雷的面前出现了一个有n*m个格子的矩阵,每个格子用"."或"#"表示,"."表示这个格子可以放东西,"#" ...

  7. 2019-8-31-dotnet-方法名-To-和-As-有什么不同

    title author date CreateTime categories dotnet 方法名 To 和 As 有什么不同 lindexi 2019-08-31 16:55:58 +0800 2 ...

  8. python已安装包的查看方法和requirements.text的使用

     1.已经安装包的查看方法 命令pip freeze 2. 批量导出命令 pip freeze >requirements.txt 3. 批量导入命令 pip install -r requir ...

  9. node.js（连接mysql）

    mysql语句中的SQL sql语句中的分类: ---DDL:(data define language)定义数据列(create,drop,alter,truncate) ---DML:(data ...

  10. VirtualBox使用随笔

    1.virtualbox配置Android手机USB热点 host:Windows10;guest:windows XP/10 右击我的电脑 - 管理 - 设备管理器 - 网卡适配器,若手机正确vb连 ...