可用在Typecho上的非常酷炫代码（一）

  1. 首页
  2. Typecho
  3. 正文

可用在TYPECHO上的非常酷炫代码,有些已用过有些还没有测试，大家可以用一下多交流。

博客独立页面（跳转）

<?php
/**
 * meta跳转
 *
 */$this->need('header.php');
?>

<html>
<body>
<meta http-equiv="refresh" content="0.1;url=www.jinyon.net">
</body>
</html> 
<?php
/**
 * header跳转
 *
 */$this->need('header.php');
?>

<?php  header("location:http://www.jinyon.net/") ?>

博客背景彩带特效

用在footer

<script>
    !
    function() {
        function n(n, e, t) {
            return n.getAttribute(e) || t
        }
        function e(n) {
            return document.getElementsByTagName(n)
        }
        function t() {
            var t = e("script"),
            o = t.length,
            i = t[o - 1];
            return {
                l: o,
                z: n(i, "zIndex", -1),
                o: n(i, "opacity", .5),
                c: n(i, "color", "0,0,0"),
                n: n(i, "count", 99)
            }
        }
        function o() {
            a = m.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
            c = m.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
        }
        function i() {
            r.clearRect(0, 0, a, c);
            var n, e, t, o, m, l;
            s.forEach(function(i, x) {
                for (i.x += i.xa, i.y += i.ya, i.xa *= i.x > a || i.x < 0 ? -1 : 1, i.ya *= i.y > c || i.y < 0 ? -1 : 1, r.fillRect(i.x - .5, i.y - .5, 1, 1), e = x + 1; e < u.length; e++) n = u[e],
                null !== n.x && null !== n.y && (o = i.x - n.x, m = i.y - n.y, l = o * o + m * m, l < n.max && (n === y && l >= n.max / 2 && (i.x -= .03 * o, i.y -= .03 * m), t = (n.max - l) / n.max, r.beginPath(), r.lineWidth = t / 2, r.strokeStyle = "rgba(" + d.c + "," + (t + .2) + ")", r.moveTo(i.x, i.y), r.lineTo(n.x, n.y), r.stroke()))
            }),
            x(i)
        }
        var a, c, u, m = document.createElement("canvas"),
        d = t(),
        l = "c_n" + d.l,
        r = m.getContext("2d"),
        x = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
        function(n) {
            window.setTimeout(n, 1e3 / 45)
        },
        w = Math.random,
        y = {
            x: null,
            y: null,
            max: 2e4
        };
        m.id = l,
        m.style.cssText = "position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o,
        e("body")[0].appendChild(m),
        o(),
        window.onresize = o,
        window.onmousemove = function(n) {
            n = n || window.event,
            y.x = n.clientX,
            y.y = n.clientY
        },
        window.onmouseout = function() {
            y.x = null,
            y.y = null
        };
        for (var s = [], f = 0; d.n > f; f++) {
            var h = w() * a,
            g = w() * c,
            v = 2 * w() - 1,
            p = 2 * w() - 1;
            s.push({
                x: h,
                y: g,
                xa: v,
                ya: p,
                max: 6e3
            })
        }
        u = s.concat([y]),
        setTimeout(function() {
            i()
        },
        100)
    } ();
</script>

博客侧边栏通缉令代码

用在footer

/*
<div id="tan" style="position:fixed;top:170px;right:0px;z-index:999;"> <a href="http://jinyon.net/tjtp1.jpg" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'images'})"><a href="http://jinyon.net/tjtp2" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'images'})"><img src="http://jinyon.net/tjtp3" width="80" height="100" class="img-responsive"></a>通缉令</a><br> <samp style="margin-left: 15px; color: red;" type="button" onclick="document.getElementById('tan').style.display='none';"><big>×</big></div>
*/

博客不允许右键代码

用在footer

<body onselectstart="return false;" oncontextmenu="alert('就是不让你按鼠标右键！');return false;" onkeydown="if(event.keyCode==27) return false;">
<script type="text/javascript">
document.onmousedown = click;  //绑定禁用鼠标右键事件
document.onkeydown = ctrl_key; //绑定禁用键盘事件
function click() {
if (event.button == 2)      //单击的鼠标键为右键
{
alert('就是不让你按鼠标右键！');
return false;
}
}
function ctrl_key() {
if (event.keyCode == 17) {                          //禁用CTRL+S 保存网页代码
window.alert("就是不让你按鼠标右键！");
return false;
}
 
if (event.keyCode == 123) {                         //禁用F12查看源代码
alert('就是不让你按鼠标右键！');
return false;
}
}
</script>

音乐播放器代码

用在footer

<!--播放器代码开始-->
<div id="audio"class="music">
<a href="http://ku.oioweb.cn/img/weimusic1.gif" class="highslide" onclick="return hs.expand(this,{slideshowGroup:'images'})"><img src="http://ku.oioweb.cn/img/weimusic1.gif" width="60px" height="60px" id="d" onclick="c();"></a>
</div>
<audio id="music"src="//音乐外链"controls="controls"preload="none"hidden></audio>
<link href="http://ku.oioweb.cn/css/music.css" rel="stylesheet"> 
<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="http://ku.oioweb.cn/js/music.js"type="text/javascript"></script>
<!--播放器代码结束-->

博客鼠标线代码

用在footer

<script>
	(function(name, factory) {
		if (typeof window === "object") {
			window[name] = factory()
		}
	})("Ribbons", function() {
		var _w = window,
			_b = document.body,
			_d = document.documentElement;
		var random = function() {
				if (arguments.length === 1) {
					if (Array.isArray(arguments[0])) {
						var index = Math.round(random(0, arguments[0].length - 1));
						return arguments[0][index]
					}
					return random(0, arguments[0])
				} else if (arguments.length === 2) {
					return Math.random() * (arguments[1] - arguments[0]) + arguments[0]
				}
				return 0
			};
		var screenInfo = function(e) {
				var width = Math.max(0, _w.innerWidth || _d.clientWidth || _b.clientWidth || 0),
					height = Math.max(0, _w.innerHeight || _d.clientHeight || _b.clientHeight || 0),
					scrollx = Math.max(0, _w.pageXOffset || _d.scrollLeft || _b.scrollLeft || 0) - (_d.clientLeft || 0),
					scrolly = Math.max(0, _w.pageYOffset || _d.scrollTop || _b.scrollTop || 0) - (_d.clientTop || 0);
				return {
					width: width,
					height: height,
					ratio: width / height,
					centerx: width / 2,
					centery: height / 2,
					scrollx: scrollx,
					scrolly: scrolly
				}
			};
		var mouseInfo = function(e) {
				var screen = screenInfo(e),
					mousex = e ? Math.max(0, e.pageX || e.clientX || 0) : 0,
					mousey = e ? Math.max(0, e.pageY || e.clientY || 0) : 0;
				return {
					mousex: mousex,
					mousey: mousey,
					centerx: mousex - screen.width / 2,
					centery: mousey - screen.height / 2
				}
			};
		var Point = function(x, y) {
				this.x = 0;
				this.y = 0;
				this.set(x, y)
			};
		Point.prototype = {
			constructor: Point,
			set: function(x, y) {
				this.x = x || 0;
				this.y = y || 0
			},
			copy: function(point) {
				this.x = point.x || 0;
				this.y = point.y || 0;
				return this
			},
			multiply: function(x, y) {
				this.x *= x || 1;
				this.y *= y || 1;
				return this
			},
			divide: function(x, y) {
				this.x /= x || 1;
				this.y /= y || 1;
				return this
			},
			add: function(x, y) {
				this.x += x || 0;
				this.y += y || 0;
				return this
			},
			subtract: function(x, y) {
				this.x -= x || 0;
				this.y -= y || 0;
				return this
			},
			clampX: function(min, max) {
				this.x = Math.max(min, Math.min(this.x, max));
				return this
			},
			clampY: function(min, max) {
				this.y = Math.max(min, Math.min(this.y, max));
				return this
			},
			flipX: function() {
				this.x *= -1;
				return this
			},
			flipY: function() {
				this.y *= -1;
				return this
			}
		};
		var Factory = function(options) {
				this._canvas = null;
				this._context = null;
				this._sto = null;
				this._width = 0;
				this._height = 0;
				this._scroll = 0;
				this._ribbons = [];
				this._options = {
					colorSaturation: "80%",
					colorBrightness: "60%",
					colorAlpha: 0.65,
					colorCycleSpeed: 6,
					verticalPosition: "center",
					horizontalSpeed: 150,
					ribbonCount: 5,
					strokeSize: 5,
					parallaxAmount: -0.5,
					animateSections: true
				};
				this._onDraw = this._onDraw.bind(this);
				this._onResize = this._onResize.bind(this);
				this._onScroll = this._onScroll.bind(this);
				this.setOptions(options);
				this.init()
			};
		Factory.prototype = {
			constructor: Factory,
			setOptions: function(options) {
				if (typeof options === "object") {
					for (var key in options) {
						if (options.hasOwnProperty(key)) {
							this._options[key] = options[key]
						}
					}
				}
			},
			init: function() {
				try {
					this._canvas = document.createElement("canvas");
					this._canvas.style["display"] = "block";
					this._canvas.style["position"] = "fixed";
					this._canvas.style["margin"] = "0";
					this._canvas.style["padding"] = "0";
					this._canvas.style["border"] = "0";
					this._canvas.style["outline"] = "0";
					this._canvas.style["left"] = "0";
					this._canvas.style["top"] = "0";
					this._canvas.style["width"] = "100%";
					this._canvas.style["height"] = "100%";
					this._canvas.style["z-index"] = "-1";
					this._onResize();
					this._context = this._canvas.getContext("2d");
					this._context.clearRect(0, 0, this._width, this._height);
					this._context.globalAlpha = this._options.colorAlpha;
					window.addEventListener("resize", this._onResize);
					window.addEventListener("scroll", this._onScroll);
					document.body.appendChild(this._canvas)
				} catch (e) {
					console.warn("Canvas Context Error: " + e.toString());
					return
				}
				this._onDraw()
			},
			addRibbon: function() {
				var dir = Math.round(random(1, 9)) > 5 ? "right" : "left",
					stop = 1000,
					hide = 200,
					min = 0 - hide,
					max = this._width + hide,
					movex = 0,
					movey = 0,
					startx = dir === "right" ? min : max,
					starty = Math.round(random(0, this._height));
				if (/^(top|min)$/i.test(this._options.verticalPosition)) {
					starty = 0 + hide
				} else if (/^(middle|center)$/i.test(this._options.verticalPosition)) {
					starty = this._height / 2
				} else if (/^(bottom|max)$/i.test(this._options.verticalPosition)) {
					starty = this._height - hide
				}
				var ribbon = [],
					point1 = new Point(startx, starty),
					point2 = new Point(startx, starty),
					point3 = null,
					color = Math.round(random(0, 360)),
					delay = 0;
				while (true) {
					if (stop <= 0) break;
					stop--;
					movex = Math.round((Math.random() * 1 - 0.2) * this._options.horizontalSpeed);
					movey = Math.round((Math.random() * 1 - 0.5) * (this._height * 0.25));
					point3 = new Point();
					point3.copy(point2);
					if (dir === "right") {
						point3.add(movex, movey);
						if (point2.x >= max) break
					} else if (dir === "left") {
						point3.subtract(movex, movey);
						if (point2.x <= min) break
					}
					ribbon.push({
						point1: new Point(point1.x, point1.y),
						point2: new Point(point2.x, point2.y),
						point3: point3,
						color: color,
						delay: delay,
						dir: dir,
						alpha: 0,
						phase: 0
					});
					point1.copy(point2);
					point2.copy(point3);
					delay += 4;
					color += this._options.colorCycleSpeed
				}
				this._ribbons.push(ribbon)
			},
			_drawRibbonSection: function(section) {
				if (section) {
					if (section.phase >= 1 && section.alpha <= 0) {
						return true
					}
					if (section.delay <= 0) {
						section.phase += 0.02;
						section.alpha = Math.sin(section.phase) * 1;
						section.alpha = section.alpha <= 0 ? 0 : section.alpha;
						section.alpha = section.alpha >= 1 ? 1 : section.alpha;
						if (this._options.animateSections) {
							var mod = Math.sin(1 + section.phase * Math.PI / 2) * 0.1;
							if (section.dir === "right") {
								section.point1.add(mod, 0);
								section.point2.add(mod, 0);
								section.point3.add(mod, 0)
							} else {
								section.point1.subtract(mod, 0);
								section.point2.subtract(mod, 0);
								section.point3.subtract(mod, 0)
							}
							section.point1.add(0, mod);
							section.point2.add(0, mod);
							section.point3.add(0, mod)
						}
					} else {
						section.delay -= 0.5
					}
					var s = this._options.colorSaturation,
						l = this._options.colorBrightness,
						c = "hsla(" + section.color + ", " + s + ", " + l + ", " + section.alpha + " )";
					this._context.save();
					if (this._options.parallaxAmount !== 0) {
						this._context.translate(0, this._scroll * this._options.parallaxAmount)
					}
					this._context.beginPath();
					this._context.moveTo(section.point1.x, section.point1.y);
					this._context.lineTo(section.point2.x, section.point2.y);
					this._context.lineTo(section.point3.x, section.point3.y);
					this._context.fillStyle = c;
					this._context.fill();
					if (this._options.strokeSize > 0) {
						this._context.lineWidth = this._options.strokeSize;
						this._context.strokeStyle = c;
						this._context.lineCap = "round";
						this._context.stroke()
					}
					this._context.restore()
				}
				return false
			},
			_onDraw: function() {
				for (var i = 0, t = this._ribbons.length; i < t; ++i) {
					if (!this._ribbons[i]) {
						this._ribbons.splice(i, 1)
					}
				}
				this._context.clearRect(0, 0, this._width, this._height);
				for (var a = 0; a < this._ribbons.length; ++a) {
					var ribbon = this._ribbons[a],
						numSections = ribbon.length,
						numDone = 0;
					for (var b = 0; b < numSections; ++b) {
						if (this._drawRibbonSection(ribbon[b])) {
							numDone++
						}
					}
					if (numDone >= numSections) {
						this._ribbons[a] = null
					}
				}
				if (this._ribbons.length < this._options.ribbonCount) {
					this.addRibbon()
				}
				requestAnimationFrame(this._onDraw)
			},
			_onResize: function(e) {
				var screen = screenInfo(e);
				this._width = screen.width;
				this._height = screen.height;
				if (this._canvas) {
					this._canvas.width = this._width;
					this._canvas.height = this._height;
					if (this._context) {
						this._context.globalAlpha = this._options.colorAlpha
					}
				}
			},
			_onScroll: function(e) {
				var screen = screenInfo(e);
				this._scroll = screen.scrolly
			}
		};
		return Factory
	});
	new Ribbons({
		colorSaturation: "60%",
		colorBrightness: "50%",
		colorAlpha: 0.5,
		colorCycleSpeed: 5,
		verticalPosition: "random",
		horizontalSpeed: 200,
		ribbonCount: 3,
		strokeSize: 0,
		parallaxAmount: -0.2,
		animateSections: true
	});
</script>

飘落树叶的代码

用在footer

<script src="https://cdn.bootcss.com/jquery/1.2.3/jquery.min.js"></script>
<script src="https://cdn.mom1.cn/1/su.js"></script>
<script type="text/javascript">jQuery(document).ready(function($){
$('body').wpSuperSnow({
flakes: ['https://cdn.mom1.cn/1/007.png','https://cdn.mom1.cn/1//006.png','https://cdn.mom1.cn/1//004.png','https://cdn.mom1.cn/1/002.png','https://cdn.mom1.cn/1/001.png','https://cdn.mom1.cn/1/003.png','https://cdn.mom1.cn/1/002.png','https://cdn.mom1.cn/1/001.png'],
totalFlakes: '290',
zIndex: '999999',
maxSize: '30',
maxDuration: '20',
useFlakeTrans: false
});
});</script>

在线人数统计

用在header

<?php
    //目录要有读写文件的权限，首次访问不会显示，正常情况刷新即可
    $online_log = "slzxrs.dat"; //保存访问人数的文件到根目录,
    $timeout = 30;//30秒内没动作者,认为掉线
    $entries = file($online_log);
    $temp = array();
    for ($i=0;$i<count($entries);$i++){
        $entry = explode(",",trim($entries[$i]));
        if(($entry[0] != getenv('REMOTE_ADDR')) && ($entry[1] > time())) {
            array_push($temp,$entry[0].",".$entry[1]."\n"); //取出其他浏览者的信息,并去掉超时者,保存进$temp
        }
    }
    array_push($temp,getenv('REMOTE_ADDR').",".(time() + ($timeout))."\n"); //更新浏览者的时间
    $slzxrs = count($temp); //计算在线人数
    $entries = implode("",$temp);
    //写入文件
    $fp = fopen($online_log,"w");
    flock($fp,LOCK_EX); //flock() 不能在NFS以及其他的一些网络文件系统中正常工作
    fputs($fp,$entries);
    flock($fp,LOCK_UN);
    fclose($fp);
    $tj= "在线人数：".$slzxrs."人";
?>

调用：

<?php echo $tj?>

网页标题变换代码

用在header

<div id="blink">
    <strong>
        <div align="left" style="text-align:center;">
            你不看我我就变脸
        </div>
    </strong><strong>
    <script language="javascript"> function changeColor(){ var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray"; color=color.split("|"); document.getElementById("blink").style.color=color[parseInt(Math.random() * color.length)]; } setInterval("changeColor()",200); </script>
    </strong>
</div>

滚动提示来访代码

用在index

<aside id="php_text-8" class="widget php_text wow fadeInUp" data-wow-delay="0.3s">
    <div class="textwidget widget-text">
        <style type="text/css">
            #container-box-1{color:#526372;text-transform:uppercase;width:100%;font-size:16px;line-height:50px;text-align:center}#flip-box-1{overflow:hidden;height:50px}#flip-box-1
            div{height:50px}#flip-box-1>div>div{color:#fff;display:inline-block;text-align:center;height:50px;width:100%}#flip-box-1
            div:first-child{animation:show 8s linear infinite}.flip-box-1-1{background-color:#FF7E40}.flip-box-1-2{background-color:#C166FF}.flip-box-1-3{background-color:#737373}.flip-box-1-4{background-color:#4ec7f3}.flip-box-1-5{background-color:#42c58a}.flip-box-1-6{background-color:#F1617D}@keyframes
            show{0%{margin-top:-300px}5%{margin-top:-250px}16.666%{margin-top:-250px}21.666%{margin-top:-200px}33.332%{margin-top:-200px}38.332%{margin-top:-150px}49.998%{margin-top:-150px}54.998%{margin-top:-100px}66.664%{margin-top:-100px}71.664%{margin-top:-50px}83.33%{margin-top:-50px}88.33%{margin-top:0px}99.996%{margin-top:0px}100%{margin-top:300px}}
        </style>
        <div id="container-box-1">
            <div class="container-box-1-1">
                坚持每天来逛逛，会让你
            </div>
            <div id="flip-box-1">
                <div>
                    <div class="flip-box-1-1">
                        工作也轻松了！
                    </div>
                </div>
                <div>
                    <div class="flip-box-1-2">
                        生活也美好了！
                    </div>
                </div>
                <div>
                    <div class="flip-box-1-3">
                        心情也舒畅了！
                    </div>
                </div>
                <div>
                    <div class="flip-box-1-4">
                        走路也有劲了！
                    </div>
                </div>
                <div>
                    <div class="flip-box-1-5">
                        腿也不痛了！
                    </div>
                </div>
                <div>
                    <div class="flip-box-1-6">
                        腰也不酸了！
                    </div>
                </div>
                <div>
                    <div class="flip-box-1-1">
                        工作也轻松了！
                    </div>
                </div>
            </div>
            <div class="container-box-1-2">
                你好我也好，不要忘记哦！
            </div>
        </div>
    </div>
    <div class="clear">
    </div>
</aside>

内容页打赏代码

用在post

<div style="padding: 10px 0; margin: 20px auto; width: 100%; font-size:16px; text-align: center;">
    <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
        <span>打赏</span></button>
    <div id="QR" style="display: none;">
        <div id="wechat" style="display: inline-block">
            <a class="fancybox" rel="group">
                <img id="wechat_qr" src="https://jinyon.net/wxds.jpg" alt="WeChat Pay"></a>
            <p>微信打赏</p>
        </div>
        <div id="alipay" style="display: inline-block">
            <a class="fancybox" rel="group">
                <img id="alipay_qr" src="https://jinyon.net/zfbds.jpg" alt="Alipay"></a>
            <p>支付宝打赏</p>
        </div>
    </div>
</div>

愚人节彩蛋代码

用在footer

<script>  
if (!mkReaddata("fool")) {  // 如果没有触发过彩蛋  
    document.body.classList.add('mk-fool-egg');     // 给 body 增加彩蛋 class  
    window.setTimeout(function () {     // 定时退出彩蛋  
        mkSavedata("fool", "fool");     // 记录彩蛋已被执行  
        alert("恭喜发现愚人节彩蛋 :)");     // 弹窗（这里可以自己发挥）  
        document.body.classList.remove('mk-fool-egg');  
    }, 5000);   // 这里的 5000 代表 5s，也就是经过 5s 后弹窗，并退出彩蛋  
}  
  
// 写入 Cookie  
function mkSavedata(key, data) {  
    key = 'mk_' + key;  
    data = JSON.stringify(data);  
    if (window.localStorage) {  
        localStorage.setItem(key, data);  
    }  
}  
  
// 读取 Cookie  
function mkReaddata(key) {  
    if (!window.localStorage) return '';  
    key = 'mk_' + key;  
    return JSON.parse(localStorage.getItem(key));  
}  
</script>  
  
<style>  
/* 彩蛋的样式代码 */  
.mk-fool-egg {  
    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);  
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);  
    transform: matrix(-1, 0, 0, 1, 0, 0);  
    -o-transform: skew(0deg, 180deg) scale(-1, 1);  
    filter:progid: DXImageTransform.Microsoft.BasicImage(mirror=1);  
}  
</style>

联系我代码

 <foot id="foot" class="foot">
            <h1 class="foot_title">联系我</h1>
            <div class="foot_info_main">
                <ul>
                    <li class="github_items">
                        <a href="https://github.com/" target="_blank">Github</a>
                    </li>
                    <li class="google_items">
                        <a href="http://www.google.cn/" target="_blank">Google+</a>
                    
                    </li>
                    <li class="twitter_items">
                        <a href="https://gitee.com/" target="_blank">码云</a>
                    
                    </li>
                    <li class="facebook_items">
                        <a href="https://www.csdn.net/" target="_blank">CSDN</a>
                    
                    </li>
                    <li class="weibo_items">
                        <a href="https://weibo.com/139551232/profile?rightmod=1&wvr=6&mod=personinfo" target="_blank">微博</a>
                    
                    </li>
                    <li class="zhihu_items">
                        <a href="https://www.zhihu.com/activities" target="_blank">知乎</a>
                    
                     </li>
                     <li class="blog_items">
                        <a href="http://jinyon.net" target="_blank">博客</a>
                    
                     </li>
                     <li class="email_items">
                        <a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=83017747@qq.com" target="_blank">邮箱</a>
                       
                    </li>
                  
                    <div class="clear"></div>
                </ul>
                <div class="qrcode_div">

页面进度条代码

<div class="box02_content box_content">
                <div id='bar_container' class="bar_container">
                    <div class='bar mint' data-percent='20' data-skill='HTML5+CSS3+JavaScript'></div>
                    <div class='bar red' data-percent='30' data-skill='PHP'></div>
                    <div class='bar lila' data-percent='20' data-skill='Python'></div>
                    <div class='bar orange' data-percent='10' data-skill='C'></div>
                </div>

页面背景音乐代码

<audio controls autoplay loop>
        <source src="music/musci.mp3" type="audio/mpeg">
        <!--自己写音乐文件路径-->
</audio>

鼠标代码萌萌哒特效

</div>
</用在footer>
<script type='text/javascript' src='http://blog.u1f.cn/templets/shu/js/jquery.fancybox.pack.js'></script>
<style type="text/css">
body {
    cursor: url(http://blog.u1f.cn/templets/shu/css/1.cur), auto;
}
a:hover {
    cursor: url(http://blog.u1f.cn/templets/shu/css/1_1.cur), auto;
}
</style>
 </div>点击爆炸效果<script type="text/javascript"
src="https://cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
<script type='text/javascript'
src='https://www.jefsky.com/usr/plugins/HoerMouse/static/js/fireworks.js'></script>
<script type='text/javascript'
src='https://www.jefsky.com/usr/plugins/Svg3dTagCloud/static/jquery.svg3dtagcloud.min.js'> 。 
</script>

以上为 JS 代码，在网页内添加如下代码即可实现

<canvas id="fireworks"
style="position:fixed;left:0;top:0;pointer-events:none;"></canvas>

鼠标点击爱心特效

<script type="text/javascript">
/ 鼠标点击特效（爱心）- Catbei/
!function (e, t, a) {function r() {for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.removeChild(s[e].el),
s.splice(e, 1)) : (s[e].y--, s[e].scale += .004, s[e].alpha -= .013,
s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y +
"px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale + "," +
s[e].scale + ") rotate(45deg);background:" + s[e].color +
";z-index:99999");requestAnimationFrame(r)}function n() {var t =
"function" == typeof e.onclick && e.onclick;e.onclick = function (e)
{t && t(), o(e)}}function o(e) {var a =
t.createElement("div");a.className = "heart", s.push({el: a,x:
e.clientX - 5,y: e.clientY - 5,scale: 1,alpha: 1,color: c()}),
t.body.appendChild(a)}function i(e) {var a =
t.createElement("style");a.type = "text/css";try
{a.appendChild(t.createTextNode(e))} catch (t) {a.styleSheet.cssText =
e}t.getElementsByTagName("head")[0].appendChild(a)}function c()
{return "rgb(" + (255 Math.random()) + "," + (255 
Math.random()) + "," + ~~(255 * Math.random()) + ")"}var s =
[];e.requestAnimationFrame = e.requestAnimationFrame ||
e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame ||
e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e)
{setTimeout(e, 1e3 / 60)}, i(".heart{width: 10px;height:
10px;position: fixed;background: #f00;transform:
rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform:
rotate(45deg);}.heart:after,.heart:before{content: '';width:
inherit;height: inherit;background: inherit;border-radius:
50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position:
fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"), n(),
r()}(window, document); </script>

变色字体

!!! <font color="#a416af"> 你看这段紫颜色，是不是充满了视觉压迫力？</font> !!!

变大小的变色字体

!!! <font color="#117113" style="font-weight:600;"> 我还可以让它变绿，再粗壮一点！</font>!!!

带背景的变色字体

!!! <div
style="width:250px;height:100px;background:#000;text-align:center;line-height:100px;">
<p><font color="#e6de22"> 黄不黄 </font></p> </div> !!!
如果您觉得我的文章有帮助，请随意赞赏！
  1. typecho给代码块添加复制按钮
  2. 可用在Typecho上的非常酷炫代码（二）
  3. 分享两个迅雷下载链接代码
  4. emlog模板制作手册—代码调用
  5. windows 中iis错误代码大汇总

*发表评论

用QQ账号登录  请登录后发表评论