CSDN自定义模块高级设置之（1）——向模块中添加动态效果、网页、3D效果、游戏等互动元素功能

最新推荐文章于 2024-06-25 09:02:59 发布
最新推荐文章于 2024-06-25 09:02:59 发布
阅读量4k 收藏 14
点赞数 9
分类专栏： CSDN自定义模板 文章标签： csdn
huidaoli版权所有，转载请标明出处
本文链接：https://blog.csdn.net/huidaoli/article/details/121749376
版权

系列文章目录

提要：如果你有阅读我上一篇文章，那么恭喜你，你已经学会设置CSDN自定义模块的简单操作模式了，下面的教程将是进阶教程，目的是让你的博客更有气氛、更酷，重点是与众不同。

简单设置模式回顾：
《CSDN自定义模块简单设置之——添加模块并填入图片、文字、链接等内容》

本期高级设置模式：
《CSDN自定义模块高级设置之（1）——向模块中添加动态效果、网页、3D效果、游戏等互动元素功能》
《CSDN自定义模块高级设置之（2）——设置主页左则及详情页背景（打造节日气氛）》

提示：需要设置的朋友们请先收藏本文章，方便日后查看设置

文章目录

前言

上期有同学说在设置CSDN自定义模块时入口找不到或无法操作：
那是因为你帐号级别不够，什么意思呢？下面是CSDN官方对此功能的使用提示，就是告诉你要支持下CSDN官方，充个会员或去认证博客专家身份，当然帐号企业认证也可以。

栏目内容支持HTML格式，不支持JS，
最多添加1个自定义栏目，VIP、博客专家、企业博客才可在个人详情页显示

博客主页效果：

博客内容详情页效果：

提示：图片换成自己的，那不是重点，有兴趣一起交流的朋友请帮忙来个一键三连+评论

一、CSDN自定义模块进阶设置？

本次对CSDN自定义模块高级设置功能主要有：向模块中添加动态效果、网页、3D效果、游戏等互动元素功能。听起来就是很厉害，看到效果你就知道了。

怎么看效果：
下面这个博客详情页可以看到：看效果传送链接

连手指都懒得动的可以看下面图片，里面都是动态的效果和可交互的效果。
在这里插入图片描述

二、简单模式设置步骤

1.设置入口

我们先进行设置入口：

在这里插入图片描述
在这里插入图片描述

2.代码编写

1.动态效果：

我们下面开始写代码：

	<p>
		<div style="width:100%; left: 0%; top: 0%; height: 100%; opacity: 1.42; z-index:11;">
			<iframe frameborder="0" src="https://www.xzwl1688.com/canvas/demo3/" scrolling="no" style="width: 100%;height: 100%;">
			</iframe>
		</div>
	</p>

	<p>
		</div><div style="width:100%; left: 0%; top: 0%; height: 100%; opacity: 1.42; z-index:11;">
			<iframe frameborder="0" src="https://www.xzwl1688.com/canvas/demo1/" scrolling="no" style="width: 100%;height: 100%;">
			</iframe>
		</div>
	</p>

效果如下：
在这里插入图片描述
在这里插入图片描述
因为是截图，看不出动的效果，可以在电脑上打开下面的链接查看我做的效果：
查看效果地址（请在电脑上打开查看）：查看效果

代码写完后请将上面代码中复制粘贴到栏目内容里保存。

2.网页效果：

我们下面写下代码：

	<p>
		</div><div style="width:100%; left: 0%; top: 0%; height: 100%; opacity: 1.42; z-index:11;">
			<iframe frameborder="0" src="【要显示的网页网址】" scrolling="no" style="width: 100%;height: 100%;">
			</iframe>
		</div>
	</p>

请将上面代码中“【中文】”的内容换成自己要添加的网址，其他操作跟上面一样，编写代码后将代码复制粘贴到栏目内容里保存，然后打开自己的任意一篇文章详情页去查看效果。

3.3D效果：

我们下面实现3D效果，代码如下：

	<p>
		<div style="width:100%; left: 0%; top: 0%; height: 100%; opacity: 1.42; z-index:11;">
			<iframe frameborder="0" src="https://www.xzwl1688.com/canvas/demo5/" scrolling="no" style="width: 100%;height: 100%;">
			</iframe>
		</div>
	</p>

动态效果如下（这里随机截了三张图）：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
因为是截图，看不出动的效果，可以在电脑上打开下面的链接查看我做的效果：
查看效果地址（请在电脑上打开查看）：查看效果

代码写完后请将上面代码中复制粘贴到栏目内容里保存。

下面我们再来实现一个3D效果，代码如下：

<p>
		<div style="width:100%; left: 0%; top: 0%; height: 100%; opacity: 1.42; z-index:11;">
			<iframe frameborder="0" src="https://www.xzwl1688.com/canvas/demo11/" scrolling="no" style="width: 100%;height: 100%;">
			</iframe>
		</div>
	</p>

动态效果如下（这里同样随机截了三张图）：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
上面的效果是可以用鼠标去旋转的。

想尝试的同学可以打开这个链接去旋转看看：
查看效果

跟上面操作一样，编写完代码后请将上面代码复制粘贴到栏目内容里保存，然后打开自己任意一篇博文在详情页查看。

4.游戏互动效果：

我们下面来实现在游戏并来互动玩下这个游戏，代码如下：

	<p>
		<div style="width:100%; left: 0%; top: 0%; height: 100%; opacity: 1.42; z-index:11;">
			<iframe frameborder="0" src="https://www.xzwl1688.com/canvas/demo7/" scrolling="no" style="width: 100%;height: 100%;">
			</iframe>
		</div>
	</p>

效果如下：
在这里插入图片描述
同样想尝试的同学可以打开这个链接去旋转玩玩这个小游戏：
查看效果

编写完代码后请将上面代码复制粘贴到栏目内容里保存，然后打开自己任意一篇博文在详情页查看。

5.PPT播放效果：

我们下面实现类似播放PPT样的效果做日出日落，代码如下：

	<p>
		<div style="width:100%; left: 0%; top: 0%; height: 100%; opacity: 1.42; z-index:11;">
			<iframe frameborder="0" src="https://www.xzwl1688.com/canvas/demo9" scrolling="no" style="width: 100%;height: 100%;">
			</iframe>
		</div>
	</p>

效果如下：
在这里插入图片描述
同样想尝试的同学可以打开这个链接去通过鼠标滚动向下翻页，当右边滚动条滚到最底部是就播放完了：
查看效果

最后同样是编写完代码后请将上面代码复制粘贴到栏目内容里保存，然后打开自己任意一篇博文在详情页查看。

上面的代码只是部分，下面贴出完整的代码：

<div>
	<p>
		<div style="width:100%; left: 0%; top: 0%; height: 100%; opacity: 1.42; z-index:11;">
			<iframe frameborder="0" src="https://www.xzwl1688.com/canvas/demo5/" scrolling="no" style="width: 100%;height: 100%;">
			</iframe>
		</div>
	</p>
	<p>
		<img src="此处修改为自己的图片地址" alt=""/>
	</p>

	<hr><hr>

	<p>
		<div style="width:100%; left: 0%; top: 0%; height: 100%; opacity: 1.42; z-index:11;">
			<iframe frameborder="0" src="https://www.xzwl1688.com/canvas/demo11/" scrolling="no" style="width: 100%;height: 100%;">
			</iframe>
		</div>
	</p>
	<p>
		<a href="此处修改为自己的网页地址" style="color:#FF0000;" target="view_window">加油！继续努力，终有一天你也会成为一名技术大佬！</a> 
	</p>
	
	<hr><hr>

	<p>
		<div style="width:100%; left: 0%; top: 0%; height: 100%; opacity: 1.42; z-index:11;">
			<iframe frameborder="0" src="https://www.xzwl1688.com/canvas/demo3/" scrolling="no" style="width: 100%;height: 100%;">
			</iframe>
		</div>
	</p>
	<p>
		<span style="color:#A67D3D;">CSDN博客：</span> 
		<a href="此处修改为自己的博客地址" target="view_window">点击进入</a> 
	</p>
	
	<p>
		<span style="color:#A67D3D;">博客园博客：</span> 
		<a href="此处修改为自己的博客地址" target="view_window">点击进入</a> 
	</p>
	
	<hr><hr>

	<p>
		</div><div style="width:100%; left: 0%; top: 0%; height: 100%; opacity: 1.42; z-index:11;">
			<iframe frameborder="0" src="https://www.xzwl1688.com/canvas/demo1/" scrolling="no" style="width: 100%;height: 100%;">
			</iframe>
		</div>
	</p>
	<p>
		<span style="color:#A67D3D;">个人GitHub：</span> 
		<a href="此处修改为自己的GitHub地址" target="view_window">点击进入</a> 
	</p>
	<p>
		<span style="color:#A67D3D;">个人Gitee：</span> 
		<a href="此处修改为自己的Gitte地址" target="view_window">点击进入</a> 
	</p>
	
	<hr><hr>

	<p>
		<div style="width:100%; left: 0%; top: 0%; height: 100%; opacity: 1.42; z-index:11;">
			<iframe frameborder="0" src="https://www.xzwl1688.com/canvas/demo9" scrolling="no" style="width: 100%;height: 100%;">
			</iframe>
		</div>
	</p>
	<p>
		<span style="color:#A67D3D;">个人邮箱：</span> 
		1069945237@qq.com
	</p>
	<p>
		<span style="color:#A67D3D;">个人微信：</span> 
		huidaoli2010
	</p>

	<hr><hr>

	<p>
		<div style="width:100%; left: 0%; top: 0%; height: 100%; opacity: 1.42; z-index:11;">
			<iframe frameborder="0" src="https://www.xzwl1688.com/canvas/demo7/" scrolling="no" style="width: 100%;height: 100%;">
			</iframe>
		</div>
	</p>
	<p>
		<a href="https://www.baidu.com/s?wd=huidaoli" style="color:#FF0000;" target="view_window">代码敲累了，玩个游戏吧！</a> 
	</p>

	<hr><hr>

	<p>
		<div style="width:100%; left: 0%; top: 0%; height: 100%; opacity: 1.42; z-index:11;">
			<iframe frameborder="0" src="https://www.xzwl1688.com/canvas/demo12/" scrolling="no" style="width: 100%;height: 100%;">
			</iframe>
		</div>
	</p>

	<p>
		<a href="https://www.baidu.com/s?wd=huidaoli" style="color:#FF0000;" target="view_window">提前祝大家圣诞元旦快乐！！</a> 
	</p>

	<hr><hr>

	<p>
		<div style="position: absolute;width:100%; left: 0%; top: 0%; height: 100%; opacity: 1.42; z-index:-1;">
			<iframe frameborder="0" src="https://www.xzwl1688.com/canvas/demo12/" scrolling="no" style="width: 100%;height: 100%;">
			</iframe>
		</div>
	</p>

</div>

最后的效果就是上面第一张图片效果：

总结

今天就先讲这里，相信高级设置模式你已经掌握了，效果是不是更好，下篇文章再给大家讲《CSDN自定义模块高级设置之（2）——设置主页左则及详情页背景（打造节日气氛）》，效果可以到我博客去看：

以上就是今天要讲的内容，希望大家感兴趣，支持我的同学请点个一键3连。

huidaoli
关注
  • 9
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 19
    评论
专栏目录
2024年Unity 面试题 |五萬字 二佰道| Unity面试题大全，面试题总结【全网最全，收藏一篇足够面试】
努力前行，总会成为自己心中的那道光
02-23 11万+
正所谓 金三银四 ，又到了找工作的大好时机了，不知道大家有没有意向找一份更好的工作呢~ 之前写了很多Unity的学习和实例文章，但是面试题部分还没有一个系统的整理。 那本篇文章就来整理一下Unity中一些常见的面试题，说不准就会面试的时候就会遇到！ 本篇文章会将Unity所有方面的面试资料都融会贯通，绝对是2022年Unity面试领域最实用的文章啦！
各种框架和效果网址
海阔天空
04-16 730
Android 工具类 史上最全的开发工具类 EditText限制输入最大最小值 文件夹工具类MaterialFilePicker: Material file picker for Android Android这可能是当今最火，功能最全的快速开发框架了 - CSDN博客 框架 网络框架 文件下载 ...
CSDN自定义模块全攻略,DIY系统原有样式打造出你的专属个性化主页！
yaosichengalpha的博客
06-25 1374
CSDN自定义模块全攻略,DIY系统原有样式打造出你的专属个性化主页！
CSDN自定义模块简单设置之——添加图片、文字、链接等
huidaoli
12-07 4640
CSDN官方为了给博主设置自己想要显示的内容而开设置的一个功能，添加自定义模块后，你的博客将多出一个功能块，而且每个人只能设置一个这样子的自定义模块。
CSDN自定义模块高级设置之（2）——设置主页左则及详情页背景（打造节日气氛）
huidaoli
12-09 3996
如果你有阅读我上二篇文章，那么恭喜你，你已经学会设置CSDN自定义模块的简单操作模式和高级操作模式了，下面的教程将是进阶教程第二篇文章，目的是让你的博客更有节日气氛。
深入浅出Python——Python基础语法全解
热门推荐
路虽远，行则必至！
07-24 7万+
前言：Python 是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。 文章目录一、Python简介1. 了解Python2. Python介绍3. Python特点4. Python发展历史5. Python版本二、Python解释器1. 解释器的作用2. 解释器的安装三、PyCharm安装与使用1. PyCharm的作用2. PyCharm安装与使用四、注释1. 注释的作用2. 注释的分类及语法五、变量1. 变量的作用2. 定义变量2.1 标识符2.2 命名习惯2.3 使用变量2.4 认识
Spring——Spring设计模式总结
庄小焱
03-21 2937
设计模式作为工作学习中的枕边书，却时常处于勤说不用的尴尬境地，也不是我们时常忘记，只是一直没有记忆。Spring作为业界的经典框架，无论是在架构设计方面，还是在代码编写方面，都堪称行内典范。spring中常用的设计模式达到九种，我们举例说明。以后再也不怕面试官问我：Spring中用了哪些设计模式了。
android高级面试题（二）
影子
05-06 1万+
Android高级面试题 （⭐⭐⭐） 一、性能优化 1、做过哪些性能优化？是怎么评测和具体优化的？ 一、App启动速度优化 开放问题：如果提高启动速度，设计一个延迟加载框架或者sdk的方法和注意的问题 二、App绘制优化 三、App内存优化 内存抖动（代码注意事项）： 内存抖动是由于短时间内有大量对象进出新生区导致的，它伴随着频繁的GC，gc会大量占用ui线程和cpu资...
AGI之Agent：Agent(一种训练LLM模拟人类在现实世界中各种规则和行为系统)的简介、部署应用及其框架、代表性案例(单智能体(BabyAGI/AutoGPT/HuggingGPT/GPT-En
近期请国内外头部出版社可尽快私信博主！——心比天高，仗剑走天涯，保持热爱，奔赴向梦想！低调，谦虚，自律，反思，成长，还算是比较正能量的博主，公益免费传播……内心特别想在AI界做出一些可以推进历史进程影响力的东西(兴趣使然，有点小情怀，也有点使命感呀)…
06-17 1056
Agent的实战部署应用LLMs之ChatGLM3：ChatGLM3/ChatGLM3-6B的简介(多阶段增强+多模态理解+AgentTuning技术)、安装和使用方法、案例应用(实现多轮对话能力(Chat)、工具调用能力(-CSDN博客LLMs之GLM-4：GLM-4的简介(全覆盖【对话版即ChatGLM4的+工具调用+多模态文生图】能力→Agent)、安装和使用方法、案例应用之详细攻略-CSDN博客2、部署框架T1、基于。
CSDN最新自定义模块
06-25
CSDN最新自定义模块CSDN最新自定义模块CSDN最新自定义模块CSDN最新自定义模块
CSDN博客专家、VIP自定义模块炫酷代码.zip
09-18
这些模块可以用于展示个人简介、项目经验、技能特长，或者添加互动元素，如计数器、广告、社交媒体链接等。这种自定义不仅能够彰显个人风格，还能有效提高博客的访问量和用户的停留时间。 “炫酷代码”通常指的是...
学学Python_52标准模块1 自定义模块
12-07
自定义模块，包，对应文件：StandardLibrary1.py，文章：https://blog.csdn.net/yysyangyangyangshan/article/details/84888873
CSDN博客自定义模块显示天气日历随机语录代码
04-03
CSDN博客自定义模块代码，可以实时显示天气、日历、随机一句话语录、灯笼代码。 效果展示可以看我的博客：https://blog.csdn.net/qq_27471405 或者看这篇博客，里面有效果展示和使用教程描述：...
和讯博客添加多个自定义模块
12-07
9. 更新与维护：自定义模块添加完成后，你还可以随时进入后台进行编辑、更新或删除，保持博客内容的活力和新鲜感。 总之，和讯博客的自定义模块功能为用户提供了丰富的个性化展示手段，通过巧妙利用这个功能，你...
基于Java开发的银行管理系统后台bankproject-master.zip
07-26
基于Java开发的银行管理系统后台bankproject-master.zip
基于Java实现的企业考勤管理系统(源代码+数据库SQL).rar
07-26
基于Java实现的企业考勤管理系统(源代码+数据库SQL).rar
【SCI1区】Matlab实现三角测量拓扑聚合优化器TTAO-Transformer-GRU故障诊断算法研究.rar
最新发布
07-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
csdn自定义模块怎么写
07-08
在CSDN上自定义模块的写法可以分为以下几个步骤： 1. 创建一个新的模块文件：在你的项目目录下创建一个新的Python文件，命名为你想要的模块名称（例如：my_module.py）。 2. 编写模块代码：在模块文件中编写你的自定义功能代码。可以包含函数、类、变量等等。例如，你可以定义一个名为`greet`的函数，用于打印问候语。 ```python def greet(name): print(f"Hello, {name}!") ``` 3. 导入自定义模块：在其他Python文件中，你可以导入并使用你自定义的模块。使用`import`关键字加上模块名称即可。 ```python import my_module my_module.greet("John") ``` 输出结果将是：`Hello, John!` 注意：确保你的模块文件和导入模块的Python文件在同一个目录下，或者将模块文件所在的目录添加到Python解释器的搜索路径中。 这样，你就可以通过CSDN自定义模块来组织和重用你的代码了。
评论 19
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

huidaoli

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值