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. Python操作SQLite数据库的方法详解

    Python操作SQLite数据库的方法详解 本文实例讲述了Python操作SQLite数据库的方法.分享给大家供大家参考,具体如下: SQLite简单介绍 SQLite数据库是一款非常小巧的嵌入式开 ...

  2. VUE ECharts人际关系图

    1. 概述 1.1 说明 项目中需要对某个人的人际关系进行展示,故使用echarts中的关系图进行处理此需求. 2. 代码 2.1 代码示例 <template> <div clas ...

  3. PHP定时任务获取微信access_token的方法

    一.使用brew安装php多版本方法 # brew install php56# brew install php70二.安装切换工具 # brew install php-version# sour ...

  4. 对象无法注册到Spring容器中，手动从spring容器中拿到我们需要的对象

    当前对象没有注册到spring容器中,此时无法new object()  的方式创建对象,否则所有@Autowired 注入的对象都为null; 处理方式: 手动创建一个类@Component注册到S ...

  5. Directx11教程(19) 画一个简单的地形

    原文:Directx11教程(19) 画一个简单的地形       通常我们在xz平面定义一个二维的网格,然后y的值根据一定的函数计算得到,比如正弦.余弦函数的组合等等,可以得到一个看似不错的地形或者 ...

  6. openstack安装dashboard后访问horizon出错 500 or 504

    访问controller/horizon出错500:internal server error 访问controller/horizon出错504:internal server error  gat ...

  7. Python　sorted

    sorted函数: iterable:是可迭代类型;cmp:用于比较的函数,比较什么由key决定,有默认值,迭代集合中的一项;key:用列表元素的某个属性和函数进行作为关键字,有默认值,迭代集合中的一 ...

  8. 开发者总结的WatchKit App提交技巧

    苹果4月初宣布所有注册开发者已经可以向App Store提交基于WatchKit开发的Apple Watch app了,不过不少开发者遇到了模拟器中没有发现的问题.这篇文章主要收集了一些提交tips和 ...

  9. nginx设置301永久重定向

    https://blog.csdn.net/wzqzhq/article/details/53376501 比如说我的域名有多个,一个主域名www.zq110.com,多个次域名:www.aaa.co ...

  10. shell学习（15）- eval及shell No such file or directory解决办法

    eval可以读取一连串的参数,然后按照参数特性来执行.参数数目不限,彼此之间用分号隔开. eval会对后面的命令进行两遍扫描,如果第一遍扫描后,命令是个普通命令,则执行此命令:如果命令中含有变量的间接 ...