将html嵌在桌面实现动态高度可定制的动态桌面，桌面显示上显示动态网页

已于 2022-03-22 20:06:36 修改
阅读量3.5k 收藏 4
点赞数 3
分类专栏： 效率工具，各种插件等 文章标签： html 前端 经验分享 音视频
于 2022-01-02 21:23:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_54430656/article/details/122280965
版权

文章目录

部分效果：

屏幕悬浮时钟

屏幕悬浮时钟

屏幕倒计时

在这里插入图片描述

把在线的谷歌首页内嵌在桌面

在这里插入图片描述

把实时数据网页内嵌在桌面当场数据看板

在这里插入图片描述

内嵌一些可以交互的html

在这里插入图片描述

其他用法




工具：Wallpaper Engine

在这里插入图片描述

我的桌面

（两边大小比例不一致是因为右边的屏幕分辨率小一点，屏幕的原因😂）
偶尔有空的时候会编辑一下低下的html/css/js，换换字体，颜色什么的，或者直接上CodePen换个别的页面后再编辑编辑
在这里插入图片描述




特点

由于是用html内嵌在下面，所以你要你懂点前端，就能实现高度定制（编辑html，js，css即可）




与其他动态桌面软件相比：

那种用视频实现的动态桌面壁纸就好比把雕刻好的石板放在桌面低下（视频要编辑很麻烦，自定义程度很低）
而用html实现动态桌面就好比把一块屏幕直接放桌面下方，屏幕嘛，想怎么该就怎么该，自定义程度很高

在这里插入图片描述

Tptogiar
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何将HTML与win10桌面壁纸,如何在Windows 10中将页面设置为桌面背景 | MOS86
weixin_34161139的博客
05-30 4598
虽然在Windows 10中更改壁纸的步骤略有改变，可以右键单击图片，然后单击设置为桌面背景选项，以快速使用图片作为桌面背景。有一些内置的选项来定制Windows 10，但是没有办法将网站设置为桌面背景。在Windows 10中使用一个网站或网页作为壁纸想要充分利用桌面区域的许多用户希望在Windows 10中设置一个实时网站或桌面作为桌面背景。例如，您可能希望将Twitter页面设置为壁纸，以查...
html5 MPlayer可定制的Web音乐播放器插件
11-07
6. **跨平台兼容性**：由于基于HTML5，MPlayer在大多数现代浏览器上都能良好运行，包括桌面端的Chrome、Firefox、Safari，以及移动端的iOS和Android设备。 7. **响应式设计**：对于移动设备，MPlayer可以适应不同...
设置HTML为桌面壁纸
AnNanDu的博客
04-07 1万+
原生js+css实现时钟效果： https://blog.csdn.net/weixin_42703239/article/details/105012665?depth_1-utm_source=distribute.pc_feed.none-task-blog-alirecmd-3&request_id=&utm_source=distribute.pc_feed.none-...
JS HTML CSS 前端页面生成电脑桌面壁纸？（动态可交互）
七月
10-09 4990
1.先看效果 以上网页取用海拥大佬的网站，有兴趣可以去关注下 2.设计网页 你们可以自己设计网页或者去网上找好的网页 甚至可以直接用百度放到桌面是可以搜索的 自己写的网页可以放服务器也可以本地 本地连接后无法编辑 3.下载应用 电脑左下角搜索 Lively 点上面应用 然后进入Microsoft Store 选择应用 然后下载 安装完成以后启动 软件自带部分壁纸 我们点击左上角加号 然后选择一个网页 本地的就选择文件 其他的就输入网址然后点箭头 回到首页点击生成的壁纸 就会替换成桌面 4.
Web前端项目-页面动态背景【附完整源码】
最新发布
qiao_yue的博客
06-20 1205
三大背景模板，附完整源码~！
windows服务与网页交互_「桌面美化」windows 免费开源的动态壁纸桌面软件
weixin_39953244的博客
12-03 160
Lively Wallpaper 一款免费的 windows 动态壁纸桌面软件，开源且完全免费内置可选择十多套预设的动态桌面壁纸也可以在网上找一些别人制作好的桌面使用支持将视频、Gif 动态图片、HTML网页、WEB 动画特效和鼠标交互等设置为动态壁纸一些动态壁纸会根据指针移动做出很多不同的效果，既有创意又非常好玩点击左侧菜单“+”号图标，可自定义壁纸它有一个强大的功能【网址爬取】能够解析网站上的...
windows网页设置为桌面背景
online151的博客
04-02 1648
这个，转载别人的，亲测有用且免费： Wallpaper Engine软件——html做为壁纸_残暴的菜鸟的博客-CSDN博客_html壁纸
html+css实现漂亮透明的登录页面，HTML实现炫酷登录页面
生活的真谛从来都不在别处 就在日常一点一滴的奋斗里
01-19 1431
今天花了几个小时的时间整理了一些响应式网站模板，代码下载方式放在了文章末尾，有什么问题可以私信我或者评论区留言。
浏览器背景透明颜色图片
m0_62096724的博客
03-26 307
国王
win10电脑怎么将html网页做成壁纸,手把手教你win10动态桌面怎么设置
weixin_36409041的博客
05-31 6782
顾名思义，动态桌面就是能够动的桌面，每天面对着千篇一律的静态桌面是不是很无聊呢？对此，我给大家整理了在win10系统下设置动态桌面的方法，有需要就赶紧来了解一下1、网页搜索动态桌面，直接点击第一个链接进入。您也可以点此下载：win10设置动态桌面电脑图解12、进入后点击页面上方法动态壁纸win10设置动态桌面电脑图解23、这时候我们就可以直接点击立即下载，如果安装不了就点击旁边的完整安装包下载wi...
html桌面应用程序 窗体,放弃winform的窗体吧，改用html作界面，桌面应用程序UI的新的开发方式。...
weixin_39529302的博客
05-30 565
做过很多winform项目，都为winform控件头疼不已。想实现一些漂亮的样子总是很难。我这里列举几个缺点：1.winform控件大多是 绝对布局 ，你需要给出准确的坐标。那么在实现居中效果就会很难。2.学习成本，也了解各个控件的结构，属性等。要想更熟练的掌握需要很多时间。3.实现界面的成本，调整各个窗体，控件的样式到原型图的效果要用很长时间。4.维护，需要懂得WINFROM的程序员来进行维护。...
动态壁纸源码
11-08
动态壁纸源码 [注意：本资源来自网络，如有侵权，请联系我删除，谢谢。]
仿windows桌面系统
10-22
仿windows桌面系统,含桌面菜单拖动，右键，工具栏，提醒，桌面分屏等功能
52_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-02
这个压缩包文件“52_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip”显然...开发者或设计师可以利用这些源码作为基础，根据自己的需求进行修改和定制，快速构建出具有现代感和高度可访问性的网站。
(142)_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-02
2. 响应式设计：响应式网页设计是一种使网站在不同设备上（如桌面、平板、手机）都能良好展示的技术。它通过CSS3（Cascading Style Sheets 3）中的媒体查询（Media Queries）来检测设备的屏幕尺寸，根据不同的条件...
响应灰绿H934_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-02
响应式设计通过流式布局、可变图片大小和隐藏或显示元素等方式实现，使得设计灵活且具有高度适应性。 "响应灰绿H934"这个名称可能指的是这个模板的特定设计风格和功能集，包括颜色方案和特定的响应式行为。源码包中...
H244_html手机网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-01
这款模板的核心特性是其响应式设计，能够自动适应不同尺寸的屏幕，无论是在智能手机、平板电脑还是桌面电脑上都能呈现出最佳的视觉效果。 HTML5是现代网页开发的标准，相比早期的HTML版本，它引入了许多新的元素、...
HTML 实现仿 Windows 桌面主题特效
热门推荐
努力是为了站在万人之中，成为别人的光
06-02 2万+
本文章为系列文章，共100个摸鱼小游戏。初学者可以尝试实现这些项目，并在HTML、CSS、JS编译环境中动手操作。所有项目都已收集在专栏【100个摸鱼小游戏】 HTML 实现仿 Windows 桌面主题特效 在线演示地址：https://haiyong.site/win/...
利用HTML自制鬼灭之刃动态壁纸
The_RedMaple的博客
12-05 3057
先上效果图 实现思路： 先写好一个HTML网页，其中包括： 左边定时的自制闹钟（什么素材都不需要，存手打代码，耗时最多的一部分） 等大的壁纸图片（最好比桌面还大一点，这样可以实现壁纸浮动） 调好自己喜欢的配色 使用Wallpaper打开该HTML文件，Wallpaper的版本可以根据自己喜好下载 代码过多，下面只放上Js 页面控制代码，若有需要的朋友，下方评论我就好了 Js 代码 $(function(){ //旋转表盘上的数字 rotateZ("...
在网页上创建一个科技感十足的动态桌面
05-31
要创建一个具有科技感的动态桌面，您可以使用 HTML、CSS、JavaScript 和一些动画库。下面是一个简单的示例，可以帮助您入门。 首先，您需要创建一个 HTML 文件，并添加一些基本的结构和样式。例如： ```html <!DOCTYPE html> <html> <head> <title>科技感十足的动态桌面</title> <style> body { margin: 0; padding: 0; overflow: hidden; background-color: #000; } canvas { display: block; position: absolute; top: 0; left: 0; z-index: -1; } </style> </head> <body> <canvas id="canvas"></canvas> <h1>这是一个科技感十足的动态桌面</h1> </body> </html> ``` 接下来，您需要使用 JavaScript 创建动画。您可以使用像 Three.js 或 PixiJS 这样的库，或者使用原生的 Canvas API。以下是一个使用 Canvas API 的示例代码： ```javascript var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var particles = []; function Particle(x, y, vx, vy, size, color) { this.x = x; this.y = y; this.vx = vx; this.vy = vy; this.size = size; this.color = color; } Particle.prototype.draw = function() { ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, true); ctx.closePath(); ctx.fill(); }; Particle.prototype.update = function() { this.x += this.vx; this.y += this.vy; if (this.x < 0 || this.x > canvas.width) { this.vx = -this.vx; } if (this.y < 0 || this.y > canvas.height) { this.vy = -this.vy; } }; for (var i = 0; i < 100; i++) { var particle = new Particle( Math.random() * canvas.width, Math.random() * canvas.height, Math.random() - 0.5, Math.random() - 0.5, Math.random() * 5, '#fff' ); particles.push(particle); } function loop() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < particles.length; i++) { particles[i].draw(); particles[i].update(); } requestAnimationFrame(loop); } loop(); ``` 这段代码会在 canvas 上创建一些随机运动的粒子，从而创建一个动态的背景。您可以根据需要修改代码，添加更多的动画效果。 最后，您可以使用 CSS 和 JavaScript 来添加一些交互效果，例如鼠标悬停时的动画效果等等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值