效果截图：

GIF:

PNG:

Html页：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>动态背景</title>
</head>
<body>
    <div id="container" class="container">
        <div id="anitOut" class="anitOut"></div>
    </div>

<!--******************************背景之上的内容******************************-->
    <div style="width:350px;height:30px;position:absolute;top:35px;left:30px;">
        <span>
            <label style="color:red;font-weight:bold;font-size:25px;">-</label>
            <label style="color:white;font-weight:bold;font-size:25px;">1,23%</label>
            <label style="color:#55c608;font-weight:bold;margin-left:10px;font-size:25px;">+</label>
            <label style="color:white;font-weight:bold;font-size:25px;">1,23%</label>
            <label style="color:#55c608;font-weight:bold;margin-left:10px;font-size:25px;">+</label>
            <label style="color:white;font-weight:bold;font-size:25px;">2,14%</label>
        </span>
    </div>
    <!--******************************背景之上的内容******************************-->

</body>
</html>

css样式：

<style type="text/css">
        .container {
            width: 400px;
            height: 140px;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
        }

.anitOut {
            width: 350px;
            height: 140px;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
        }

.anitOut canvas {
                -webkit-border-radius: 8px;
                -moz-border-radius: 8px;
                border-radius: 8px;
                float: left;
            }
    </style>

JS逻辑[另外需要引用：jquery-1.11.2.min.js 和 cav.js 下载地址：https://download.csdn.net/download/qq_33538554/10953942]:

<script type="text/javascript">
        $(function () {
            if (!window.ActiveXObject && !!document.createElement("canvas").getContext) {
                $.getScript("cav.js",
                    function () {
                        var t = {
                            width: 1.5,
                            height: 1.5,
                            depth: 10,
                            segments: 12,
                            slices: 6,
                            xRange: 0.8,
                            yRange: 0.1,
                            zRange: 1,
                            ambient: "#525252",
                            diffuse: "#FFFFFF",
                            speed: 0.0002
                        };
                        var G = {
                            count: 2,
                            xyScalar: 1,
                            zOffset: 100,
                            ambient: "#0094ff",
                            diffuse: "#005584",
                            speed: 0.001,
                            gravity: 1200,
                            dampening: 0.95,
                            minLimit: 10,
                            maxLimit: null,
                            minDistance: 20,
                            maxDistance: 400,
                            autopilot: false,
                            draw: false,
                            bounds: CAV.Vector3.create(),
                            step: CAV.Vector3.create(Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1))
                        };
                        var m = "canvas";
                        var E = "svg";
                        var x = {
                            renderer: m
                        };
                        var i, n = Date.now();
                        var L = CAV.Vector3.create();
                        var k = CAV.Vector3.create();
                        var z = document.getElementById("container");
                        var w = document.getElementById("anitOut");
                        var D, I, h, q, y;
                        var g;
                        var r;

function C() {
                            F();
                            p();
                            s();
                            B();
                            v();
                            K(z.offsetWidth, z.offsetHeight);
                            o()
                        }

function F() {
                            g = new CAV.CanvasRenderer();
                            H(x.renderer)
                        }

function H(N) {
                            if (D) {
                                w.removeChild(D.element)
                            }
                            switch (N) {
                                case m:
                                    D = g;
                                    break
                            }
                            D.setSize(z.offsetWidth, z.offsetHeight);
                            w.appendChild(D.element)
                        }

function p() {
                            I = new CAV.Scene()
                        }

function s() {
                            I.remove(h);
                            D.clear();
                            q = new CAV.Plane(t.width * D.width, t.height * D.height, t.segments, t.slices);
                            y = new CAV.Material(t.ambient, t.diffuse);
                            h = new CAV.Mesh(q, y);
                            I.add(h);
                            var N, O;
                            for (N = q.vertices.length - 1; N >= 0; N--) {
                                O = q.vertices[N];
                                O.anchor = CAV.Vector3.clone(O.position);
                                O.step = CAV.Vector3.create(Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1), Math.randomInRange(0.2, 1));
                                O.time = Math.randomInRange(0, Math.PIM2)
                            }
                        }

function B() {
                            var O, N;
                            for (O = I.lights.length - 1; O >= 0; O--) {
                                N = I.lights[O];
                                I.remove(N)
                            }
                            D.clear();
                            for (O = 0; O < G.count; O++) {
                                N = new CAV.Light(G.ambient, G.diffuse);
                                N.ambientHex = N.ambient.format();
                                N.diffuseHex = N.diffuse.format();
                                I.add(N);
                                N.mass = Math.randomInRange(0.5, 1);
                                N.velocity = CAV.Vector3.create();
                                N.acceleration = CAV.Vector3.create();
                                N.force = CAV.Vector3.create()
                            }
                        }

function K(O, N) {
                            D.setSize(O, N);
                            CAV.Vector3.set(L, D.halfWidth, D.halfHeight);
                            s()
                        }

function o() {
                            i = Date.now() - n;
                            u();
                            M();
                            requestAnimationFrame(o)
                        }

function u() {
                            var Q, P, O, R, T, V, U, S = t.depth / 2;
                            CAV.Vector3.copy(G.bounds, L);
                            CAV.Vector3.multiplyScalar(G.bounds, G.xyScalar);
                            CAV.Vector3.setZ(k, G.zOffset);
                            for (R = I.lights.length - 1; R >= 0; R--) {
                                T = I.lights[R];
                                CAV.Vector3.setZ(T.position, G.zOffset);
                                var N = Math.clamp(CAV.Vector3.distanceSquared(T.position, k), G.minDistance, G.maxDistance);
                                var W = G.gravity * T.mass / N;
                                CAV.Vector3.subtractVectors(T.force, k, T.position);
                                CAV.Vector3.normalise(T.force);
                                CAV.Vector3.multiplyScalar(T.force, W);
                                CAV.Vector3.set(T.acceleration);
                                CAV.Vector3.add(T.acceleration, T.force);
                                CAV.Vector3.add(T.velocity, T.acceleration);
                                CAV.Vector3.multiplyScalar(T.velocity, G.dampening);
                                CAV.Vector3.limit(T.velocity, G.minLimit, G.maxLimit);
                                CAV.Vector3.add(T.position, T.velocity)
                            }
                            for (V = q.vertices.length - 1; V >= 0; V--) {
                                U = q.vertices[V];
                                Q = Math.sin(U.time + U.step[0] * i * t.speed);
                                P = Math.cos(U.time + U.step[1] * i * t.speed);
                                O = Math.sin(U.time + U.step[2] * i * t.speed);
                                CAV.Vector3.set(U.position, t.xRange * q.segmentWidth * Q, t.yRange * q.sliceHeight * P, t.zRange * S * O - S);
                                CAV.Vector3.add(U.position, U.anchor)
                            }
                            q.dirty = true
                        }

function M() {
                            D.render(I)
                        }

function J(O) {
                            var Q, N, S = O;
                            var P = function (T) {
                                for (Q = 0, l = I.lights.length; Q < l; Q++) {
                                    N = I.lights[Q];
                                    N.ambient.set(T);
                                    N.ambientHex = N.ambient.format()
                                }
                            };
                            var R = function (T) {
                                for (Q = 0, l = I.lights.length; Q < l; Q++) {
                                    N = I.lights[Q];
                                    N.diffuse.set(T);
                                    N.diffuseHex = N.diffuse.format()
                                }
                            };
                            return {
                                set: function () {
                                    P(S[0]);
                                    R(S[1])
                                }
                            }
                        }

function v() {
                            window.addEventListener("resize", j)
                        }

function A(N) {
                            CAV.Vector3.set(k, N.x, D.height - N.y);
                            CAV.Vector3.subtract(k, L)
                        }

function j(N) {
                            K(z.offsetWidth, z.offsetHeight);
                            M()
                        }
                        C();
                    })
            }
        });
    </script>

HTML 动态背景相关推荐

  1. 开源超美css动态背景 可直接引入html文件使用 含注释、可更改

    开源超美css动态背景 可直接引入html文件使用 含注释.可更改 1.背景样式 本背景为动态蜘蛛网背景. 上图: 2.如何在html里面引用,作为html背景 1文件目录 放在同一目录下 2 在in ...

  2. 基于opencV的动态背景下运动目标检测及跟踪(修改版)

    基于openCV的动态背景下的运动目标检测 from: http://www.mianfeiwendang.com/doc/89c6692a222a84b2ced0d502/1 摘要:介绍在动态背景下 ...

  3. 计算机视觉与深度学习 | 动态背景下的前景目标提取

    ################################################ 博主github:https://github.com/MichaelBeechan 博主CSDN:h ...

  4. 计算机视觉与深度学习 | 不含动态背景的前景目标提取

    ################################################ 博主github:https://github.com/MichaelBeechan 博主CSDN:h ...

  5. 新版本NexT 调动态背景、调canvas_nest的解决方案

    今天在学习使用Hexo修改next的背景时,发现: 这几个东西我无论设置哪些个为true,都调不出动态背景: 随后开始在网上搜,发现大多都是针对老版本的NexT调动态背景或者canvas_nest的解 ...

  6. 微信小程序展示动态背景图(含三目运算符)

    微信小程序展示背景图片 一.微信小程序展示背景图片的类型 二.语法书写 1.简单展示 2.动态背景图片 一.微信小程序展示背景图片的类型 当在小程序开发中,本地的背景图片也是可以展示的,但是在真机运行 ...

  7. html怎样实现动态背景效果,利用jQuery实现动态背景特效

    特效描述:利用jQuery实现 动态背景特效.利用jQuery实现动态背景特效 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Example 1 ooh, pretty. Notic ...

  8. 【opencv】动态背景下运动目标检测 SURF配准差分

    主要思路是,读入视频,隔帧采用SURF计算匹配的特征点,进而计算两图的投影映射矩阵,做差分二值化,连通域检测,绘制目标. 如果背景是静态的采用camshift即可. 本文方法速度debug下大概2-3 ...

  9. 运动检测与跟踪之动态背景的更新

    转载自http://blog.csdn.net/dcrmg/article/details/52263532 运动物体检测与跟踪中的帧差分法,除了相邻帧差分法和三帧差分法外,还有一种差分方法,可以通过 ...

  10. vscode怎么设置动态背景

    vscode怎么设置动态背景 1.在vscode插件中下载background插件 2.选择->首页->首选项->设置 or ctrl+, 3.在设置中搜索background 点击 ...

最新文章

  1. 每日一皮：你不知道你的骑手为了给你送餐要经历什么...
  2. 星空[好题][题意转化]
  3. leetcode笔记（一）309. Best Time to Buy and Sell Stock with Cooldown
  4. python 大数据学习 遇到的问题，及解决方法。
  5. Leaflet中使用Leaflet-echarts3插件实现航班航线动态模拟
  6. Val编程-速度因子
  7. 在linux文件共享接口,入坑Linux-day13（使用vsftpd服务传输文件、使用Samba或NFS实现文件共享）...
  8. lambda函数 RUNOOB python练习题49
  9. 怎样成为一名A“.NET研究”ndroid开发者
  10. FPGA跨时钟域异步时钟设计的几种同步策略
  11. 【Linux 内核】Linux 内核源码结构 ( 下载 Linux 内核源码 | 使用 VSCode 阅读 Linux 内核源码 )
  12. 机器学习评估指标 - f1, precision, recall, acc, MCC
  13. E575: viminfo: Illegal starting char in line:
  14. JWTUtil工具类使用
  15. 【磨刀不误砍柴工】(SCH-1217) Could not open “XXschematic“ for edit. Would you like to open it for read?问题。
  16. 奥斯汀页眉怎么设置_word红头文件怎么制作
  17. 【编程不良人】快速入门Spring学习笔记08---事务属性、Spring整合Structs2框架(SM)、Spring整合Mybatis+Struts2(SSM)、Spring注解、SSM注解式开发
  18. 火车头采集之采集规则编写
  19. HR吐槽某博士程序员：简历写了12页，是不是读书读傻了
  20. 大蒜敷脚心涌泉穴的功效和具体方法

热门文章

  1. 共识算法POW原理及实现
  2. 判断魔方阵c语言程序设计_魔方阵算法及C语言实现
  3. vue组件传参(父传子)
  4. C语言实现搬山游戏，附上代码及解析
  5. 华为交换机测试吞吐量软件,华为选择Spirent验证最新数据中心交换机的性能
  6. std::stable_sort 和 std::for_each 的用法[转]
  7. 【单片机仿真】（二十）ORG — 设置起始地址
  8. linux酒吧消费,Handpick x HK I 深夜霓虹燈下的迷幻酒吧
  9. centos7 scons安装_安装Python和Scons
  10. 打包项目出错 Your build settings specify a provisioning profile with the UUI