博客主题美化篇

文章目录[x]
  1. 1:单击显示文字
  2. 2:鼠标点击产生烟花爆炸效果
  3. 3:添加字体(打字)特效
  4. 4:点击出现彩粒
  5. 5:添加雪花飘落
  6. 6:浏览器搞笑标题
  7. 7:添加动态线条效果
  8. 8:数字雨代码
  9. 9:添加花瓣飘落
  10. 10:光标星星
  11. 11:炫彩时间

最近几天一直在学习python,今天下午抽时间总结一下关于主题美化的东西。中间可能涉及到一些插件和接口。小生总结的很仓促,主要是为了以后查找方便。

前言

之前我写过一篇《几个炫酷的js特效》 (里面也有一些不错的)也可以参考一下呢~

所谓主题美化,大白话讲就是把网页弄得好看一点,总结之前我先推荐一篇trhx写的文章:

参考文章:https://itrhx.blog.csdn.net/article/details/85420403

废话不多说直接进入正文

单击显示文字

首先建立一个js文件,比如click_show_text.js,然后在js文件中添加一下代码

 

# 文字可以随意变更
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array
("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
var $i = $("<span/>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 5,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "#FF0000"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
3000,
function() {
$i.remove();
});
});
setTimeout('delay()', 2000);
});

function delay() {
$(".buryit").removeAttr("onclick");
}

想要显示不同文字,把color的值进行更改即可

<span class="token string">"color"</span><span class="token punctuation">:</span> <span class="token string">"rgb("</span> <span class="token operator">+</span> <span class="token operator">~</span><span class="token operator">~</span><span class="token punctuation">(</span><span class="token number">255</span> <span class="token operator">*</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">","</span> <span class="token operator">+</span> <span class="token operator">~</span><span class="token operator">~</span><span class="token punctuation">(</span><span class="token number">255</span> <span class="token operator">*</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">","</span> <span class="token operator">+</span> <span class="token operator">~</span><span class="token operator">~</span><span class="token punctuation">(</span><span class="token number">255</span> <span class="token operator">*</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">")"</span>

然后在网页</body>前面引用即可,如

<span class="token tag"><span class="token punctuation"><</span>script <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">".</span>/click_show_text.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>script<span class="token punctuation">></span></span>

鼠标点击产生烟花爆炸效果

在footer.php中</body>标签前加入下面代码保存即可产生效果

<!--点击爆炸鼠标特效-->
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/SGYZ0910/CDN@1.1.6/js/anime.min.js"></script> 
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/SGYZ0910/CDN@1.1.5/js/firework.js"></script>

效果如下图

添加字体(打字)特效

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
<div style="text-align: center;font-size: 30px;color: #FF6699;">
<span id="subtitle"></span>
<span id="typed-cursor"></span>
</div>
<script>
var typed = new Typed("#subtitle", { strings: ["老当益壮,宁移白首之心;穷且益坚,不坠青云之志", "为天地立心,为生民立命,为往圣继绝学", "洛洛清心何处是,红尘一诺水中流", "古之成大事者,不惟有超世之才,亦必有坚韧不拔之志。", "剑沾胭脂绘红颜,雪飘青山见白头。", "一入IT深似海,从此学习无绝期"], startDelay: 1000, typeSpeed: 100, loop: !0, backSpeed: 60, backDelay: 2000, showCursor: !0 })
</script>

效果如下图

点击出现彩粒

还是在footer.php中</body>标签前加入下面代码保存即可产生效果

<!-- 点击冒点 -->
<canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>
<script src="https://cdn.jsdelivr.net/gh/SGYZ0910/CDN@1.0.7/js/maodian.js"></script>

效果如下图

 

添加雪花飘落

这里我说三种样式(第一种的话我只给出js源代码引用一下就好了)

第一种就是这种飘落

代码如下

/*样式一*/
(function($){
$.fn.snow = function(options){
var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('&#10052;'),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
minSize : 10,
maxSize : 20,
newOn : 1000,
flakeColor : "#AFDAEF" /* 此处可以定义雪花颜色,若要白色可以改为#FFFFFF */
},
options = $.extend({}, defaults, options);
var interval= setInterval( function(){
var startPositionLeft = Math.random() * documentWidth - 100,
startOpacity = 0.5 + Math.random(),
sizeFlake = options.minSize + Math.random() * options.maxSize,
endPositionTop = documentHeight - 200,
endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
durationFall = documentHeight * 10 + Math.random() * 5000;
$flake.clone().appendTo('body').css({
left: startPositionLeft,
opacity: startOpacity,
'font-size': sizeFlake,
color: options.flakeColor
}).animate({
top: endPositionTop,
left: endPositionLeft,
opacity: 0.2
},durationFall,'linear',function(){
$(this).remove()
});
}, options.newOn);
};
})(jQuery);
$(function(){
$.fn.snow({ 
minSize: 5, /* 定义雪花最小尺寸 */
maxSize: 50,/* 定义雪花最大尺寸 */
newOn: 300 /* 定义密集程度,数字越小越密集 */
});
});

第二种的效果如下

在footer.php中</body>标签前引用下面代码

<script src="https://cdn.jsdelivr.net/gh/TRHX/CDN-for-itrhx.com@3.0.6/js/snow3.js"></script>

第三种效果如下

引用代码

<!--雪花特效-->
<script src="https://cdn.jsdelivr.net/gh/TRHX/CDN-for-itrhx.com@2.2.2/js/snow.js"></script>

浏览器搞笑标题

先新建一个js文件,然后添加下列代码,在网页中引用即可

// 浏览器搞笑标题
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
$('[rel="icon"]').attr('href', "/funny.ico");
document.title = '╭(°A°`)╮ 404,页面崩溃啦 ~';
clearTimeout(titleTime);
}
else {
$('[rel="icon"]').attr('href', "/favicon.ico");
document.title = '(ฅ>ω<*ฅ) 欢迎回来 ~' + OriginTitle;
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});

添加动态线条效果

先看一下下效果吧

脚本引用代码

<!--动态线条背景-->
<script type="text/javascript"
color="220,220,220" opacity='0.7' zIndex="-2" count="200" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">
</script>

数字雨代码

先建立一个js文件,加入下列代码

window.onload = function(){
//获取画布对象
var canvas = document.getElementById("canvas");
//获取画布的上下文
var context =canvas.getContext("2d");
var s = window.screen;
var W = canvas.width = s.width;
var H = canvas.height;
//获取浏览器屏幕的宽度和高度
//var W = window.innerWidth;
//var H = window.innerHeight;
//设置canvas的宽度和高度
canvas.width = W;
canvas.height = H;
//每个文字的字体大小
var fontSize = 12;
//计算列
var colunms = Math.floor(W /fontSize); 
//记录每列文字的y轴坐标
var drops = [];
//给每一个文字初始化一个起始点的位置
for(var i=0;i<colunms;i++){
drops.push(0);
}
//运动的文字
var str ="WELCOME TO WWW.SGYZYUN.CLUB";
//4:fillText(str,x,y);原理就是去更改y的坐标位置
//绘画的函数
function draw(){
context.fillStyle = "rgba(238,238,238,.08)";//遮盖层
context.fillRect(0,0,W,H);
//给字体设置样式
context.font = "600 "+fontSize+"px Georgia";
//给字体添加颜色
context.fillStyle = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"][parseInt(Math.random() * 10)];//randColor();可以rgb,hsl, 标准色,十六进制颜色
//写入画布中
for(var i=0;i<colunms;i++){
var index = Math.floor(Math.random() * str.length);
var x = i*fontSize;
var y = drops[i] *fontSize;
context.fillText(str[index],x,y);
//如果要改变时间,肯定就是改变每次他的起点
if(y >= canvas.height && Math.random() > 0.99){
drops[i] = 0;
}
drops[i]++;
}
};
function randColor(){//随机颜色
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb("+r+","+g+","+b+")";
}
draw();
setInterval(draw,35);
};

在css文件中添加下面代码(可以在自定义css文件中)

canvas {
position: fixed;
right: 0px;
bottom: 0px;
min-width: 100%;
min-height: 100%;
height: auto;
width: auto;
z-index: -1;
}

最后就是引用了(注意下面的路径是你的路径)

<span class="token comment"><!-- 数字雨 --></span> 
<span class="token tag"><span class="token punctuation"><</span>canvas <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>canvas<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1440<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>900<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>canvas<span class="token punctuation">></span></span> 
<span class="token tag"><span class="token punctuation"><</span>script <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">".</span>/DigitalRain.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>script<span class="token punctuation">></span></span>

添加花瓣飘落

先看一下效果

先下载需要的源文件:云盘下载

下载后解压到主题目录下,然后编辑footer,php文件,在<footer>标签前加入下面代码

注意路径引用

<!--花瓣飘落-->
<?php require get_template_directory() . './hua/hua.php'; ?>

光标星星

这个是在一篇博客上看到的(这里我也给集成了一下,直接引用就行),原文链接:http://mlldxe.cn/archives/526

效果

 

<!--直接在body标签前引用就行-->
<script src="https://cdn.jsdelivr.net/gh/SGYZ0910/CDN@2.1.3/js/guangbiao.js"></script>

 

炫彩时间

这个算是扒来的,原博客(这个博客很唯美的):https://www.imzy.ink/

效果如下

源码:

这一部分加在head头标签里

<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
.logosvg {
height:100px;
width:180px;
}
.words {
font-size:4vh;
font-weight:bold;
text-transform:uppercase;
fill:none;
stroke-width:1.5px;
stroke-dasharray:90,310;
animation-name:drawing;
animation-duration:8s;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
.words-1 {
stroke:deepskyblue;
text-shadow:0 0 50px deepskyblue;
animation-delay:-2s;
}
.words-2 {
stroke:lightseagreen;
text-shadow:0 0 50px lightseagreen;
animation-delay:-4s;
}
.words-3 {
stroke:orange;
text-shadow:0 0 50px orange;
animation-delay:-6s;
}
.words-4 {
stroke:purple;
text-shadow:0 0 50px purple;
animation-delay:-8s;
}
@keyframes drawing {
100% {
stroke-dashoffset:-400;
}
}</style>

下面的加在body标签里

<!--炫彩时间-->
<svg class="logosvg">
<text id="time" text-anchor="middle" x="50%" y="65%" class="words words-1"></text>
<text id="time" text-anchor="middle" x="50%" y="65%" class="words words-2"></text>
<text id="time" text-anchor="middle" x="50%" y="65%" class="words words-3"></text>
<text id="time" text-anchor="middle" x="50%" y="65%" class="words words-4"></text>
</svg>
<script>
function showtime() {
var noatime = new Date();
var h = noatime.getHours(),
m = noatime.getMinutes(),
s = noatime.getSeconds();
h = checktime(h);
m = checktime(m);
s = checktime(s);
return h + ":" + m + ":" + s;
}
function checktime(x) {
if (x < 10) {
x = "0" + x;
}
return x;
}
var div1 = document.getElementsByTagName("text");
setInterval(function() {
for (var i in div1) {
div1[i].innerHTML = showtime();
}
}, 1000);
</script>
点赞
  1. 孟超说道:
    Google Chrome Windows 10

    不错不错,老哥加油,友链已添加 :zhenbang:

    1. 洛 尘曦 洛 尘曦说道:
      Google Chrome Windows 10

      老哥见笑了 :haha: 加油!

  2. het说道:
    Google Chrome Windows 10

    最让我关心的却没说 你的那个IP和地址是怎么获取的

    1. 洛 尘曦 洛 尘曦说道:
      Google Chrome Windows 10

      就是一个获取ip的脚本呢~,你直接在小工具的自定义HTML中加下面代码就行了呢
      [highlight lanaguage="HTML"]

      你的IP:

      你的地址:

      [/highlight]

发表评论

昵称和uid可以选填一个,填邮箱必填(留言回复后将会发邮件给你)
tips:输入uid可以快速获得你的昵称和头像

Title - Artist
0:00