html多个好看的背景动态效果（附源码）
2024-05-24 03:18:53
文章目录
- 1.设计来源
- 1.1 图片轮动背景
- 1.2 星空流星背景
- 1.3 动态美女背景
- 1.4 动态屋雨背景
- 1.5 动态街道背景
- 1.6 动态夜幕背景
- 2.效果和源码
- 2.1 动态效果
- 2.2 透明度配置
- 2.2 源代码
- 源码下载
作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/128239241
html多个好看的背景动态效果，html多个好看的背景动态效果，html背景动态效果，里面带有五种好看的，酷炫的动态背景效果，图片轮动动态背景效果，星空流星动态背景效果，动态美女背景效果，动态屋雨背景效果，动态街道背景效果，动态夜幕背景效果，可以直接嵌套在在自己的代码里。
1.设计来源
1.1 图片轮动背景
背景图片可以自定义，轮播间隔时间可以自定义配置，转换得风格也可以配置。
具体动态的效果，详见下面的 动态效果 视频
1.2 星空流星背景
星空流星背景 夜空中一颗流星闪过。
具体动态的效果，详见下面的 动态效果 视频
1.3 动态美女背景
一个回眸，一个眨眼，是心动的感觉
具体动态的效果，详见下面的 动态效果 视频
1.4 动态屋雨背景
安静的房间，听窗外的雨滴的声音
具体动态的效果，详见下面的 动态效果 视频
1.5 动态街道背景
空空的街道，安静下的街道
具体动态的效果，详见下面的 动态效果 视频
1.6 动态夜幕背景
花开花落，仰望星空
具体动态的效果，详见下面的 动态效果 视频
2.效果和源码
2.1 动态效果
html多个背景动态效果，活学活用，以后酷炫得背景将都收于心中。
html多个好看的背景动态效果
2.2 透明度配置
活学活用，可以让背景呈现不同得色调。
//背景得透明度
.bg{opacity: 1;
}//背景遮罩得透明度，背景颜色可以自定义，让背景上方遮罩一层自定义透明色。
.bg2{opacity: 0.1;background-color: #2b202d;
}
2.2 源代码
这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。
<!-- xcLeighhttps://blog.csdn.net/weixin_43151418--><!DOCTYPE html>
<html><head> <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="icon" type="image/png" href="img/favicon.ico" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>xcLeigh - 动态背景效果</title><link rel="stylesheet" type="text/css" href="./css/index.css"/><script src="./js/index.js" type="text/javascript"></script> </head> <body oncontextmenu="return false;" onselectstart="return false;" unselectable="on" ondragstart="return false;"><!-- 背景 --><div class="bg"></div><!-- 背景遮罩，可有可无，可以配置穿透颜色 --><div class="bg2"></div><!-- 内容 --><div><div class="cs"><span class="spanLink spanLeft" onclick="goUrl('https://blog.csdn.net/weixin_43151418');">xcLeigh</span><span class="spanLink" onclick="goUrl1('index.html');">图片轮动背景</span><span class="spanLink" onclick="goUrl1('index1.html');">星空流星背景</span><span class="spanLink" onclick="goUrl1('index2.html');">动态美女背景</span><span class="spanLink" onclick="goUrl1('index3.html');">动态屋雨背景</span><span class="spanLink" onclick="goUrl1('index4.html');">动态街道背景</span><span class="spanLink" onclick="goUrl1('index5.html');">动态夜幕背景</span></div><div class="cs1"><div class="cs1div"><div class="cs1div1"><span>前端</span></div><div class="cs1div2"><span title="点击查看源码介绍文章"><a href="https://blog.csdn.net/weixin_43151418/article/details/128028326" style="text-decoration:none;" target="_blank">html实现个人导航主页(附带源码)</a></span></div><div class="cs1div3"><span title="点击下载源代码资源" style="cursor:pointer;"><a href="https://download.csdn.net/download/weixin_43151418/87151110" style="text-decoration:none;" target="_blank">下载</a></span></div></div></div><div class="cs1"><div class="cs1div cs2div"><div class="cs1div1"><span>前端</span></div><div class="cs1div2"><span title="点击查看源码介绍文章"><a href="https://blog.csdn.net/weixin_43151418/article/details/127736068" style="text-decoration:none;" target="_blank">html实现个人空间主页(附带源码)</a></span></div><div class="cs1div3"><span title="点击下载源代码资源" style="cursor:pointer;"><a href="https://download.csdn.net/download/weixin_43151418/86946095" style="text-decoration:none;" target="_blank">下载</a></span></div></div></div><div class="cs1"><div class="cs1div"><div class="cs1div1"><span>前端</span></div><div class="cs1div2"><span title="点击查看源码介绍文章"><a href="https://blog.csdn.net/weixin_43151418/article/details/128006618" style="text-decoration:none;" target="_blank">html实现浪漫表白，甜蜜示爱(附带源码)</a></span></div><div class="cs1div3"><span title="点击下载源代码资源" style="cursor:pointer;"><a href="https://download.csdn.net/download/weixin_43151418/87134250" style="text-decoration:none;" target="_blank">下载</a></span></div></div></div><div class="cs1"><div class="cs1div cs2div"><div class="cs1div1"><span>后端</span></div><div class="cs1div2"><span title="点击查看源码介绍文章"><a href="https://blog.csdn.net/weixin_43151418/article/details/124986738" style="text-decoration:none;" target="_blank">SpringBoot API接口对数据库增删改查,路由,TOKEN,WebSocket完整版(附源码)</a></span></div><div class="cs1div3"><span title="点击下载源代码资源" style="cursor:pointer;"><a href="https://download.csdn.net/download/weixin_43151418/85507777" style="text-decoration:none;" target="_blank">下载</a></span></div></div></div><div class="cs1"><div class="cs1div"><div class="cs1div1"><span>后端</span></div><div class="cs1div2"><span title="点击查看源码介绍文章"><a href="https://blog.csdn.net/weixin_43151418/article/details/124803795" style="text-decoration:none;" target="_blank">asp.net WebService 后台数据API JSON(附源码)</a></span></div><div class="cs1div3"><span title="点击下载源代码资源" style="cursor:pointer;"><a href="https://download.csdn.net/download/weixin_43151418/85398407" style="text-decoration:none;" target="_blank">下载</a></span></div></div></div><div class="cs1"><div class="cs1div cs2div"><div class="cs1div1"><span>前后端</span></div><div class="cs1div2"><span title="点击查看源码介绍文章"><a href="https://blog.csdn.net/weixin_43151418/article/details/124986567" style="text-decoration:none;" target="_blank">C#MVC列表实现增删改查导入导出曲线功能(附源码)</a></span></div><div class="cs1div3"><span title="点击下载源代码资源" style="cursor:pointer;"><a href="https://download.csdn.net/download/weixin_43151418/85468685" style="text-decoration:none;" target="_blank">下载</a></span></div></div></div><div class="cs1"><div class="cs1div"><div class="cs1div1"><span>前后端</span></div><div class="cs1div2"><span title="点击查看源码介绍文章"><a href="https://blog.csdn.net/weixin_43151418/article/details/124658533" style="text-decoration:none;" target="_blank">SSM框架的后台管理系统（附源码）</a></span></div><div class="cs1div3"><span title="点击下载源代码资源" style="cursor:pointer;"><a href="https://download.csdn.net/download/weixin_43151418/85326936" style="text-decoration:none;" target="_blank">下载</a></span></div></div></div><div class="cs1"><div class="cs1div cs2div"><div class="cs1div1"><span>游戏</span></div><div class="cs1div2"><span title="点击查看源码介绍文章"><a href="https://blog.csdn.net/weixin_43151418/article/details/125074948" style="text-decoration:none;" target="_blank">html好看的拼图小游戏(附源码) </a></span></div><div class="cs1div3"><span title="点击下载源代码资源" style="cursor:pointer;"><a href="https://download.csdn.net/download/weixin_43151418/85513664" style="text-decoration:none;" target="_blank">下载</a></span></div></div></div><div class="cs1"><div class="cs1div"><div class="cs1div1"><span>游戏</span></div><div class="cs1div2"><span title="点击查看源码介绍文章"><a href="https://blog.csdn.net/weixin_43151418/article/details/127619801" style="text-decoration:none;" target="_blank">html制作好看的五子棋（源码） </a></span></div><div class="cs1div3"><span title="点击下载源代码资源" style="cursor:pointer;"><a href="https://download.csdn.net/download/weixin_43151418/86863009" style="text-decoration:none;" target="_blank">下载</a></span></div></div></div><div class="cs1"><div class="cs1div cs2div"><div class="cs1div1"><span>教程</span></div><div class="cs1div2"><span title="点击学习uniapp"><a href="https://blog.csdn.net/weixin_43151418/category_11580746.html" style="text-decoration:none;" target="_blank">uniapp 技术点解析</a></span></div><div class="cs1div3"><span title="点击学习uniapp" style="cursor:pointer;"><a href="https://blog.csdn.net/weixin_43151418/category_11580746.html" style="text-decoration:none;" target="_blank">学习</a></span></div></div></div></div> </body>
</html>源码下载
html多个好看的背景动态效果（源码） 点击下载
html多个好看的背景动态效果（附源码）相关推荐
- html实现好看的导航主页(附源码)
文章目录 1.设计来源 1.1 主界面 1.2 底部导航 1.3 屏幕保护 2.效果和源码 2.1 动态效果 2.2 源代码 源码下载 作者:xcLeigh 文章地址:https://blog.csd ...
- html制作好看的个人简历(附源码)
文章目录 1.设计来源 1.1 主界面 1.2 基本资料页面 1.3 个人名言页面 1.4 教育经历页面 1.5 联系方式页面 1.6 自我评价页面 1.7 工作经历页面 1.8 兴趣爱好页面 1.9 ...
- android中设置ListView的选中的Item的背景颜色(附源码)
http://longyi-java.iteye.com/blog/976067 ListView中没有默认的选择颜色,只有选择Item后的焦点颜色,鼠标点击时Item有颜色,放开鼠标后颜色也就没有了 ...
- [项目]配合JQuery简洁好看的倒计时页面(附源码)
- html实现好看的个人介绍，个人主页模板5(附源码)
文章目录 1.设计来源 1.1 主界面 1.2 我的介绍界面 1.3 我的能力界面 1.4 项目案例界面 1.5 联系我界面 2.效果和源码 2.1 动态效果 2.2 源代码 2.3 源代码目录 源码 ...
- html实现酷炫好看的个人介绍主页(附源码)
文章目录 1.设计来源 1.1 主界面 1.2 我的简介界面 1.3 教育经历界面 1.4 我的源码界面 1.5 我的相册界面 1.6 朋友评价界面 1.7 热门文章界面 1.8 联系我界面 2.效果 ...
- html实现好看的个人介绍，个人主页模板3(附源码)
文章目录 1.设计来源 1.1 主界面 1.2 关于我界面 1.3 教育成就界面 1.4 项目演示界面 1.5 联系我界面 2.效果和源码 2.1 动态效果 2.2 源代码 2.2 源代码目录 源码下 ...
- html实现好看的个人介绍，个人主页模板1(附源码)
文章目录 1.设计来源 1.1 主界面 1.2 关于我界面 1.3 自我介绍界面 1.4 项目演示界面 1.5 个人成就界面 1.6 联系我界面 2.效果和源码 2.1 动态效果 2.2 源代码 源码 ...
- html实现好看的个人介绍，个人主页模板4(附源码)
文章目录 1.设计来源 1.1 主界面 1.2 我的文章界面 1.3 我的相册界面 1.4 关于我界面 1.5 联系我界面 2.效果和源码 2.1 动态效果 2.2 源代码 2.2 源代码目录 源码下 ...
最新文章
- 使用C#格式化字符串 1
- PHP7.0连接DB
- 认识目标文件的格式—— a.out COFF PE ELF
- java limit_Java 8 Stream：limit（）和skip（）之间的区别
- 平方矩阵——3种思路
- python求excel的最大行_解决使用Pandas 读取超过65536行的Excel文件问题
- liu系统的混沌特性及其matlab仿真,Liu系统的混沌特性及其Matlab仿真
- Tensorflow-saver模型参数保存及载入
- 【Laravel】Laravel-admin后台框架-2创建数据表建立模块增删改查CURD(1)
- 工业场景知识图谱落地实战
- NodeJS 基础 API
- iOS-Building for iOS Simulator, but the linked and embedded framework ‘XX.framework‘ was built for
- html table space,html – white-space：nowrap中断显示：table
- https://blog.csdn.net/qq_35992900/article/details/80673889
- 【web系列十五】Ubuntu系统部署Web项目
- 练习3-4 统计字符 (15分)
- c语言随机数猜手心手背,[ME]不知道第幾次學c語言，仍覺得水深莫測
- Node.js学习笔记(九)#log4js日志管理
- java jmi的基本思想_联合库存管理（jmi）的定义及主要思想是什么
- 实时音视频面视必备：快速掌握11个视频技术相关的基础概念