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. Poj 1182种类（带权）并查集

    题目链接 食物链 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 44316 Accepted: 12934 Descriptio ...

  2. JRE System Library、Referenced Libraries、Web App Libraries的含义

    JRE System Library.Referenced Libraries.Web App Libraries 这三个都是jar包的存放集合. JRE System Library:指Java S ...

  3. Codeforces Round #429 (Div. 2) A. Generous Kefa【hash/判断字符串是否有一种字符个数大于m】

    A. Generous Kefa time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...

  4. Bigdecimal 相加结果为0的解决

    之前很少使用这样的一个对象BigDecimal,今天在改需求的时候遇到了,结果坑爹的怎么相加最后都为零. 代码如下: BigDecimal totalAmount = new BigDecimal(0 ...

  5. BOT建设经营转让,PPP公私合作

    PPP.BOT两种模式有什么区别? BOT模式(build-operate-transfer),由投资方建设并专营一定期限最后移交政府的方式:PPP模式(public-private-partners ...

  6. 【转载】【python】python练手项目

    入门篇 1.Python - Python 图片转字符画 50 行 Python 代码完成图片转字符画小工具. &lt;img src="https://pic3.zhimg.com ...

  7. 使用Fiddler抓取到的“姐夫酷”API接口

    下午本来准备抓取些网页视频地址,做一个小的视频app,用来学习ijkplayer,无意中发现了一个app--姐夫酷,这是一个很简单的网页,它也有相应的一个比较简单的android app. 于是心血来 ...

  8. U盘安装win7 raid设置

    需要先安装驱动!  大白菜U盘安装界面有一个选择驱动的选项,选择驱动即可.Intel_ESRT2_Windows_signed_DRV_v16.03.2014.1127

  9. Directx11教程(3) 一个最基本D3D应用程序(1)

    原文:Directx11教程(3) 一个最基本D3D应用程序(1)       在前一篇教程程序代码的基础上,这次我们将增加2个类: InputClass,键盘处理的代码将放在这个类里面,Graphi ...

  10. iOS 小 Tip：优化侧滑返回与 ScrollView 的兼容性

    http://www.cocoachina.com/ios/20150909/13369.html 作者:@周楷雯Kevin 授权本站转载. 倘若在 ViewController 中添加了一个 Tab ...