1500字范文 > CSDN自定义模块高级设置之（1）——向模块中添加动态效果网页 3D效果游戏等互动

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

时间：2019-09-15 05:01:57

系列文章目录

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

简单设置模式回顾：

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

本期高级设置模式：

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

《CSDN自定义模块高级设置之（2）——设置主页左则及详情页背景（打造节日气氛）》

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

文章目录

系列文章目录前言一、CSDN自定义模块进阶设置？二、简单模式设置步骤1.设置入口2.代码编写1.动态效果：2.网页效果：3.3D效果：4.游戏互动效果：5.PPT播放效果：总结

前言

上期有同学说在设置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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/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="/canvas/demo9" scrolling="no" style="width: 100%;height: 100%;"></iframe></div></p><p><span style="color:#A67D3D;">个人邮箱：</span> 1069945237@</p><p><span style="color:#A67D3D;">个人微信：</span> huidaoli</p><hr><hr><p><div style="width:100%; left: 0%; top: 0%; height: 100%; opacity: 1.42; z-index:11;"><iframe frameborder="0" src="/canvas/demo7/" scrolling="no" style="width: 100%;height: 100%;"></iframe></div></p><p><a href="/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="/canvas/demo12/" scrolling="no" style="width: 100%;height: 100%;"></iframe></div></p><p><a href="/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="/canvas/demo12/" scrolling="no" style="width: 100%;height: 100%;"></iframe></div></p></div>

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