首页 > 技术文章 > 博客园特效代码

ccfco 2021-06-29 16:11 原文

我的博客园所有代码

页面定制 CSS 代码

/*背景*/
body:before {
    background: url(https://img2018.cnblogs.com/blog/1646268/201906/1646268-20190625093618683-318547492.jpg) center/cover no-repeat;
    content: '';
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.08;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    -webkit-filter: grayscale(40%);
    -moz-filter: grayscale(40%);
    -ms-filter: grayscale(40%);
    -o-filter: grayscale(40%);
    filter: grayscale(40%);
    filter: gray;
}

/*下雪特效*/
#Snow{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: rgba(255,255,240,0.1);
    pointer-events: none;
}

/* 看板娘 */
canvas#live2dcanvas {
border: 0 !important;
/* left: 0; */
right: 0;
}

博客侧边栏公告(支持HTML代码)

 1 <!--雪花-->
 2 <div class="Snow">
 3     <canvas id="Snow"></canvas>
 4 </div>
 5 <script src="https://files.cnblogs.com/files/cn-suqingnian/snow.js"></script>
 6 
 7 <!--看板娘-->
 8 
 9 
10 <!-- 爱心特效 -->
11 <script type="text/javascript">
12 
13 (function(window,document,undefined){
14         var hearts = [];
15         window.requestAnimationFrame = (function(){
16                 return window.requestAnimationFrame || 
17                            window.webkitRequestAnimationFrame ||
18                            window.mozRequestAnimationFrame ||
19                            window.oRequestAnimationFrame ||
20                            window.msRequestAnimationFrame ||
21                            function (callback){
22                                    setTimeout(callback,1000/60);
23                            }
24         })();
25         init();
26         function init(){
27                 css(".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: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
28                 attachEvent();
29                 gameloop();
30         }
31         function gameloop(){
32                 for(var i=0;i<hearts.length;i++){
33                     if(hearts[i].alpha <=0){
34                             document.body.removeChild(hearts[i].el);
35                             hearts.splice(i,1);
36                             continue;
37                     }
38                     hearts[i].y--;
39                     hearts[i].scale += 0.004;
40                     hearts[i].alpha -= 0.013;
41                     hearts[i].el.style.cssText = "left:"+hearts[i].x+"px;top:"+hearts[i].y+"px;opacity:"+hearts[i].alpha+";transform:scale("+hearts[i].scale+","+hearts[i].scale+") rotate(45deg);background:"+hearts[i].color;
42             }
43             requestAnimationFrame(gameloop);
44         }
45         function attachEvent(){
46                 var old = typeof window.onclick==="function" && window.onclick;
47                 window.onclick = function(event){
48                         old && old();
49                         createHeart(event);
50                 }
51         }
52         function createHeart(event){
53             var d = document.createElement("div");
54             d.className = "heart";
55             hearts.push({
56                     el : d,
57                     x : event.clientX - 5,
58                     y : event.clientY - 5,
59                     scale : 1,
60                     alpha : 1,
61                     color : randomColor()
62             });
63             document.body.appendChild(d);
64     }
65     function css(css){
66             var style = document.createElement("style");
67                 style.type="text/css";
68                 try{
69                     style.appendChild(document.createTextNode(css));
70                 }catch(ex){
71                     style.styleSheet.cssText = css;
72                 }
73                 document.getElementsByTagName('head')[0].appendChild(style);
74     }
75         function randomColor(){
76                 return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
77         }
78 })(window,document);
79 
80 </script>

页首 HTML 代码

1 <!-- 单机放大图片 -->
2 <link href="https://blog-static.cnblogs.com/files/zouwangblog/lightbox.css" rel="stylesheet">
3 
4 <!-- lightbox.js核心代码 -->
5 <script src="https://blog-static.cnblogs.com/files/yadongliang/lightbox-plus-jquery.js"></script>
6 <script type='text/javascript'>$('#cnblogs_post_body img').wrap(function(){return "<a href='"+$(this).attr("src")+"' data-lightbox='example-set'></a>"});</script>
7 <script type='text/javascript'>$(".code_img_closed").unwrap();</script>
8 <script type='text/javascript'>$(".code_img_opened").unwrap();</script>

页脚 HTML 代码

 1 <!-- 烟花 -->
 2 <script src="https://blog-static.cnblogs.com/files/yjlblog/cursor-effects.js"></script>
 3  <canvas width="1366" height="662" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>
 4 
 5 <!-- 看板娘 -->
 6 <script src="https://cdn.jsdelivr.net/npm/live2d-widget@3.0.4/lib/L2Dwidget.min.js"></script>
 7 <script type="text/javascript">
 8 L2Dwidget.init();
 9 </script>
10 
11 <!-- 自定义评论样式 -->
12 <link  type="text/css" rel="stylesheet" href="https://blog-static.cnblogs.com/files/zouwangblog/comment.css">
13 <script type="text/javascript">
14 $(function(){
15     $('#blogTitle h1').addClass('bounceInLeft animated');
16     $('#blogTitle h2').addClass('bounceInRight animated');
17     // 删除反对按钮    $('.buryit').remove();
18     initCommentData();
19 });
20 function initCommentData() {
21     $('.feedbackItem').each(function() {
22         var text = $(this).find('.feedbackListSubtitle .layer').text();
23         // 将楼层信息放到data里面
24         // $(this).find('.blog_comment_body').attr('data-louceng', text.replace(/^#/g, ''));
25         if($(this).find('.feedbackListSubtitle .louzhu').length>0) $(this).addClass('myself');
26         var avatar = $(this).find('> .feedbackCon > span').html() || 'http://pic.cnitblog.com/face/sample_face.gif';
27         $(this).find('> .feedbackCon > .blog_comment_body').append('<img class="user-avatar" src="'+avatar+'"/>')
28     });
29 }
30 
31 $(document).ajaxComplete(function(event, xhr, settings) {
32   // 监听获取评论ajax事件
33   if(settings.url.indexOf('/mvc/blog/GetComments.aspx') >= 0) {
34     initCommentData();
35   }
36 });
37 </script>

 

推荐阅读