这个在wp很多了啊,重点都在素材上,今天老白博客@老白我也分享一下自己的WordPress网站点击效果+鼠标样式美化(以7b2主题为例,其实wp通用)
一、效果演示
1.1 鼠标点击随机文字特效
1.2 鼠标样式美化
其实就是两张图片:选中链接和不选中链接两种情况对应不同图片
1.3 网页背景粒子特效
二、实现代码
2.1 点击随机文字
加在主题文件/footer.php底部,</body>之前即可
<!--网站点击文字特效-www.xcbtmw.com老白博客-->
<script type="text/javascript">
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("富强","民主","文明","和谐","自由","平等","公正","法治","爱国","敬业","诚信","友善");
var $i = $("<span></span>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 99999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"//颜色随机
//"#2299DD" //固定颜色
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>
2.2 鼠标效果美化
在主题文件/style.css底部添加即可,下载下方的鼠标样式文件,而后获得地址即可
/** 鼠标样式 开始-www.xcbtmw.com**/
/** 普通指针样式**/
body {
cursor: url(图片地址1,不要复制我这个www.xcbtmw.com/11.webp), default;
}
/** 链接指针样式-www.xcbtmw.com**/
a:hover{cursor:url(图片地址2,不要复制我这个www.xcbtmw.com/22.webp), pointer;}
/** 鼠标样式 结束-www.xcbtmw.com**/
鼠标样式下载:https://qtrj.lanzoul.com/iMjZYyt4gsb
2.3 网页背景粒子特效
footer.php文件底部,同样的
<!--网页背景粒子特效 开始-www.xcbtmw.com-->
<script type="text/javascript" color="0,205,205" opacity='0.7' zIndex="-2" count="99"
src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
<!--网页背景粒子特效 结束-www.xcbtmw.com-->
三、相关美化
内容太多,文末标签!
1.本站大部分内容均收集于网络!若内容若侵犯到您的权益,请发送邮件至:duhaomu@163.com,我们将第一时间处理!
2.资源所需价格并非资源售卖价格,是收集、整理、编辑详情以及本站运营的适当补贴,并且本站不提供任何免费技术支持。
3.所有资源仅限于参考和学习,版权归原作者所有,更多请阅读网站声明。