博客园美化，鼠标点击特效，更换背景

 博客园美化，鼠标点击特效，更换背景

下面是普通特效，鼠标特效，修改背景，加动态效果等

鼠标特效

在设置里把下面代码复制到页脚html里即可实现，鼠标点击出现彩色汉字特效

<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("❤郑恩地❤","❤李知恩❤","❤金泰妍❤","❤希望天空❤","❤除了春天、爱情和樱花❤","❤why❤","❤少女的少年❤","❤palette❤","❤rain❤","❤夜信❤","❤blueming❤","❤离别初体验❤");
        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": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        3000,
        function() {
            $i.remove();
        });
    });
});
</script>

鼠标拖动线条聚集特效：

<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>

加入小仓鼠喂食动画：

此部分代码加入博客侧边栏公告里

点击给食物，仓鼠会自动去吃食物，点击转盘，转盘会加速转动。

<object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=000000&amp;up_feetColor=D4B898&amp;up_eyeColor=FFFFFF&amp;up_wheelSpokeColor=000000&amp;up_wheelColor=FFFFFF&amp;up_waterColor=66CDAA&amp;up_earColor=FFFFFF&amp;up_wheelOuterColor=000000&amp;up_snoutColor=FFFFFF&amp;up_bgColor=F5DEB3&amp;up_foodColor=000000&amp;up_wheelCenterColor=000000&amp;up_tailColor=FFFFFF&amp;" width="200" height="160">
<param name="movie" value="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2E&amp;up_tailColor=E6DEBE&amp;">
<param name="AllowScriptAccess" value="always">
<param name="wmode" value="opaque"></object>

加入雪花飘落特效：

可设置雪花飘落速度和大小

<script type="text/javascript">  
 (function($){  
     $.fn.snow = function(options){  
     var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px', 'cursor': 'pointer'}).html('❄'),  
     documentHeight  = $(document).height(),  
     documentWidth   = $(document).width(),  
     defaults = {  
         minSize     : 10,  
         maxSize     : 20,  
         newOn       : 1000,  
         flakeColor  : "#FFFFFF" /* 此处可以定义雪花颜色，若要白色可以改为#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: 80,/* 定义雪花最大尺寸 */  
         newOn: 200  /* 定义密集程度，数字越小越密集 */  
     });  
 });

更改背景：

首先找到自己博客的相册

 上传照片，进入此博客，右键点击检查，在图片链接右键得到图片的链接；

把上面得到的链接放入页面定制css中，加入以下代码并修改image:url的值。

#blogTitle {

                                     height: 120px;

                             clear: both; 

                                     background-image:url("http://images2015.cnblogs.com/blog/1062569/201611/1062569-20161115122914232-1696133774.jpg");

                                     background-position:center;

}

精美博客皮肤

下面链接有一套非常漂亮的博客皮肤，博主精心制作

https://www.cnblogs.com/bndong/

加入个人github链接：

也是加入设置页脚html里即可，可在官网选择样式  https://github.blog/2008-12-19-github-ribbons/

<a href="https://github.com/youwh-PIRI"><img width="149" height="149" 
   src="https://github.blog/wp-content/uploads/2008/12/forkme_left_red_aa0000.png?resize=149%2C149" 
   class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1"></a>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/ywheunji/p/12290702.html