HTML 动态背景

最新推荐文章于 2025-07-03 09:31:30 发布
最新推荐文章于 2025-07-03 09:31:30 发布
阅读量1.7w 收藏 11
点赞数 9
CC 4.0 BY-SA版权
分类专栏： HTML 文章标签： HTML 动态背景 js css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/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.youkuaiyun.com/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,
                 &nbs

最低0.47元/天 解锁文章

200万优质内容无限畅学
html5散花动态背景
11-14
html5的非常漂亮的满屏樱花飘落的动态背景，可做网站首页
HTML5QQ登录cav demo
weixin_30877181的博客
06-15 904
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>html5背景</title> <style type="text/css"> *{margin:0...
CodeBuddy 制作粒子背景，为首页增添动感与趣味
最新发布
不惑
07-03 736
摘要：本文介绍了粒子背景在网页设计中的视觉增强作用，通过动态粒子效果提升用户体验和互动性。文章详解了粒子背景的设计意义、核心功能（如鼠标悬停扩散、连线效果、参数自定义等）以及与CodeBuddy智能工具的交互方式。文中还提供了完整的HTML/CSS/JavaScript代码实现，包含粒子动画生成器、控制面板和多种预设效果（星空、雪花、雨滴等），展示了如何通过响应式设计在不同设备上呈现一致的粒子效果。这种动态背景不仅能提升网站现代感，还能创造沉浸式用户体验。
php网站分享qq代码下载,HTML5QQ登录的一篇代码分享
weixin_30983965的博客
03-16 670
html5背景*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}$(function () {if (!window.ActiveXObject && !!document.createElement("canvas").getContext) {$.getScript("http://im-img.qq.com/...
html动态背景分享,酷炫一款动态背景（HTML +js canvas）
weixin_30131977的博客
06-09 6845
一款酷炫的前端动态页面废话不多说 ，分享一款酷炫的页面动态背景 效果见下图。查看demo背景图效果：实例效果点击效果：背景css*{margin: 0;padding: 0;}#canvas{position: fixed;background: #ccc;overflow: auto;z-index: -1;}背景html背景jswindow.requestAnimationFrame = ...
背景动态变化的html页面
小蓝枣的博客
10-24 1682
通过使用@keyframes规则定义关键帧，并将动画应用于背景元素，我们可以实现背景色的动态变化。在这个示例中，我们将背景颜色设置为红、蓝、绿、黄和紫，然后通过动画属性将其循环应用于背景元素。
HTML炫酷背景动态效果 精选20+
03-29
内附几十种背景动态特效，可用作企业网站背景、个人博客主页背景，登陆页面背景等，非常炫酷，包含类型（3D场景、动画线分形、电流变形效果、过山车、海洋、黑洞效应、互动星空、生日祝福等...）
html多个好看的背景动态效果(源码)
12-08
html多个好看的背景动态效果，里面带有五种好看的，酷炫的动态背景效果，图片轮动动态背景效果，星空流星动态背景效果，动态美女背景效果，动态屋雨背景效果，动态街道背景效果，动态夜幕背景效果，可以直接嵌套在在...
HTML5动态背景登录页面模板
06-24
HTML5动态背景登录页面模板是现代网页设计中一个引人注目的实例，它结合了HTML5的先进技术与独特的视觉效果，旨在提供一个吸引用户并增强用户体验的登录界面。这款模板的特点在于其动态背景，通常包括浮动的气泡或...
HTML5动态散花背景特效
02-14
在本示例中，“HTML5动态散花背景特效”是一个利用HTML5技术实现的网页装饰元素，旨在为网站或博客增添视觉吸引力。 首先，这个特效的核心在于JavaScript，HTML5的一个重要组成部分。JavaScript允许开发者创建交互...
HTML5樱花飘落背景动画特效
02-27
HTML5樱花飘落背景动画特效是一种利用HTML5、CSS3以及JavaScript技术实现的网页动态效果。这个特效将静态的网页背景转化为动态的樱花飘落场景，为网站增添了一种浪漫和诗意的氛围，提升了用户体验和网页的个性化设计...
奇幻动态特效背景html+css+js.zip
04-26
奇幻动态特效背景
网页动态背景代码（4种）
05-09
包含4个网页动态背景特效，canvas特效，svg特效，需要的可以下载使用或者学习
用html写一个有趣的动态背景
liulang68的博客
04-20 987
【代码】用html写一个有趣的动态背景。
有趣的HTML实例（八） 一个很有趣的动态背景（css+js）
好好读书
02-12 4546
有趣的HTML实例（八） 一个很有趣的动态背景（css+js） 一款简单的 HTML+CSS+JS 一个很有趣的动态背景（css+js）实例 1、HTML 2、CSS 3、JS 4、舒适的画面感 5、人潮汹涌
html动态背景gif图片,gif动态背景
weixin_32869687的博客
06-04 4831
网上很多更换照片背景颜色的实用教程，大多都是静态图片的PS更换方法。也有不少人咨询如何给GIF动态图片更换背景颜色同时仍有动画效果的。更换GIF图背景相比更换静态图背景的要麻烦些，要一帧帧的来修改。这里小编整理出一个还算简易的解决方案，希望能帮到有需要的朋友。先预览一下效果吧：原图(GIF动画)更换背景后的gif图片1更换背景后的gif图片2如果原图背景比较复杂，最常用的方法是PS用钢笔工具抠出每...
HTML实现动态的美丽背景，含导航栏，简洁美观大气代码，全免费
chenzhi0122的博客
06-15 1734
【代码】HTML实现动态的美丽背景，含导航栏，简洁美观大气代码，全免费。
html漂亮的动态背景切换
梦溪笔谈的博客
01-07 3515
html好看的动态背景切换
HTML5实现动态视频背景
PmtxPhp的博客
09-23 3695
首先，我们需要准备一个视频文件，可以是MP4、WebM或Ogg格式的视频。在现代网页设计中，动态视频背景成为了吸引用户注意力和增强页面视觉效果的一种流行趋势。使用上述代码，你就可以实现一个简单的动态视频背景效果。你可以根据自己的需要调整样式和视频源，以创建更具吸引力的页面。在示例代码中，我们添加了一个MP4格式的视频源，你也可以通过添加其他格式的源来增强兼容性。属性设置为-1，以确保视频背景位于其他页面内容的下方。在上述代码中，我们使用了CSS来设置页面的样式。属性被设置为0，以确保视频背景占据整个页面。
html动画背景
03-21
以下是使用HTML和CSS创建动画背景的两种实现方法，包含无缝循环效果和动态渐变背景的示例： ### 方法一：平移动画背景（图片循环） ```html <!DOCTYPE html> <html> .background-container { width: 100vw; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值