HTML 动态背景

最新推荐文章于 2024-06-20 23:28:37 发布
最新推荐文章于 2024-06-20 23:28:37 发布
阅读量1.7w 收藏 11
点赞数 9
分类专栏： HTML 文章标签： HTML 动态背景 js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33538554/article/details/87089557
版权

效果截图：

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>

段旭文
关注
  • 9
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html动态背景分享,酷炫一款动态背景（HTML +js canvas）
weixin_30131977的博客
06-09 6487
一款酷炫的前端动态页面废话不多说 ，分享一款酷炫的页面动态背景 效果见下图。查看demo背景图效果：实例效果点击效果：背景css*{margin: 0;padding: 0;}#canvas{position: fixed;background: #ccc;overflow: auto;z-index: -1;}背景html背景jswindow.requestAnimationFrame = ...
html背景图片动效,css3实现点击切换背景图片，并且背景图片实现动画效果
weixin_42627812的博客
06-21 1230
个人认为这是一个很不错的css3案例哦！又是用DW写的啦没办法放效果图哦，就简单放个静态图好了，唉，我也觉得好无奈哦效果图如下：代码如下：xmlns="http://www.w3.org/1999/xhtml">http-equiv="Content-Type"content="text/html; charset=utf-8" />无标题文档body{ margin:0; heigh...
html背景动起来,js+css让背景图片动起来
weixin_32060671的博客
06-26 666
css+js让背景图片动起来*{margin:0;padding:0;}#section{width: 800px;height: 300px;margin:0 auto;background:url("images/timg_11.jpg");background-position-x: 0px;background-position-y: 0px;background-repeat: repe...
html多个好看的背景动态效果（附源码）
xcLeigh
12-09 3万+
html多个好看的背景动态效果，html背景动态效果，里面带有五种好看的，酷炫的动态背景效果，图片轮动动态背景效果，星空流星动态背景效果，动态美女背景效果，动态屋雨背景效果，动态街道背景效果，动态夜幕背景效果，可以直接嵌套在在自己的代码里。
Web前端项目-页面动态背景【附完整源码】
最新发布
qiao_yue的博客
06-20 1148
三大背景模板，附完整源码~！
html怎样实现动态背景效果,利用jQuery实现动态背景特效
weixin_42531923的博客
06-04 2032
特效描述：利用jQuery实现 动态背景特效。利用jQuery实现动态背景特效代码结构1. 引入CSS2. 引入JS3. HTML代码Example 1ooh,pretty.Notice how the background slowly changes colour over time. Refresh the page a few times - you will see that the o...
HTML创意动画代码
qq_52108058的博客
02-25 1万+
这个代码使用了 Canvas 技术，创建了一个随机生成的气泡背景并且让气泡动态漂浮，形成了一个很有趣的效果。你可以在这个基础上尝试进行一些自己的创意，比如修改气泡的数量、大小、颜色，以及运动的方式等等。 这个代码使用了 CSS 的动画和阴影特效，让页面中的文字在红、橙、黄、绿、蓝五种颜色之间不断变化，形成了一个很有趣的效果。你可以在这个基础上尝试进行一些自己的创意，比如修改文字的大小、样式、颜色，以及变化的频率和方式等等。 该示例中，我们使用了 transform-style: preserve-3d 属性
开源超美css动态背景 可直接引入html文件使用 含注释、可更改
热门推荐
十一月廿七风雨大作
03-17 4万+
开源超美css动态背景 可直接引入html文件使用 含注释、可更改 1.背景样式 本背景为动态蜘蛛网背景。 上图： 2.如何在html里面引用，作为html背景 1文件目录 放在同一目录下 2 在index.html内引用 &lt;html&gt; &lt;script src="change.js" type="text/javascript"&gt;&lt;/script&gt; ...
HTML炫酷背景动态效果 精选20+
03-29
内附几十种背景动态特效，可用作企业网站背景、个人博客主页背景，登陆页面背景等，非常炫酷，包含类型（3D场景、动画线分形、电流变形效果、过山车、海洋、黑洞效应、互动星空、生日祝福等...）
html多个好看的背景动态效果(源码)
12-08
html多个好看的背景动态效果，里面带有五种好看的，酷炫的动态背景效果，图片轮动动态背景效果，星空流星动态背景效果，动态美女背景效果，动态屋雨背景效果，动态街道背景效果，动态夜幕背景效果，可以直接嵌套在在...
HTML5动态散花背景特效
02-14
在本示例中，“HTML5动态散花背景特效”是一个利用HTML5技术实现的网页装饰元素，旨在为网站或博客增添视觉吸引力。 首先，这个特效的核心在于JavaScript，HTML5的一个重要组成部分。JavaScript允许开发者创建交互...
cav.js和jquery-1.11.2.min.js
02-12
cav.js和jquery-1.11.2.min.js 用于案例下载，案例地址：https://blog.csdn.net/qq_33538554/article/details/87089557
jquery-1.11.2.min.js
02-22
jquery-1.11.2.min.js
html5背景动画.rar
11-16
本资源“html5背景动画.rar”提供了一个使用jQuery实现的网页气泡动态背景特效，非常适合那些想要为自己的网站增添趣味性和动态效果的开发者。 首先，HTML5的新特性之一是Canvas元素，它允许开发者在网页上进行动态...
HTML5动态背景登录页面模板
06-24
HTML5动态背景登录页面模板是现代网页设计中一个引人注目的实例，它结合了HTML5的先进技术与独特的视觉效果，旨在提供一个吸引用户并增强用户体验的登录界面。这款模板的特点在于其动态背景，通常包括浮动的气泡或...
php插入html动态背景,HTML5超酷响应式视频背景动画特效
weixin_35110330的博客
03-17 712
简要教程这是一款HTML5超酷响应式视频背景动画特效。该视频背景可以将视频自适应屏幕的大小，制作出炫酷的动态视频背景效果。使用方法在页面中引入bideo.js文件。HTML结构该视频背景动画特效的基本HTML结构如下。 Bideo.jsHTML5超酷响应式视频背景动画特效JavaScript在页面底部，使用下面的js代码来初始化该视频背景动画特效。(function () {...
Canvas实现HTML动态粒子效果背景
拾不到一片光的博客
03-25 9894
    之前参考诸多博客，发现许多博主自定义的博客主页都会有很多动态的小粒子在页面漂浮，鼠标经过还会有响应事件，在这里，将代码记录一下。    首先，在html页面要先定义一个canvas元素：&lt;canvas id="cas"&gt;&lt;/canvas&gt;    然后，对应的js文件        var canvas = document.getElementById("cas")...
HTML实现一个动态散花背景
weixin_45932157的博客
02-19 3319
<script src="js/index.js"></script>
网页动态背景代码
llp5210的博客
02-23 5425
<!--网页动态背景——随鼠标变换的动态线条--> <script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script> <script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget....
html动态背景图片
07-28
回答: 在HTML中，可以通过CSS来设置动态背景图片。可以使用background-image属性来设置背景图片的URL，如引用\[1\]和引用\[2\]所示。同时，可以使用background-position属性来设置背景图片的起始位置，使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值