博客园美化教程指引

标签：function heart 教程 url 博客园 window 美化

展示博客园首页美化效果

展示博客园文章美化效果

简单介绍：

本美化是基于博客园皮肤 ==> SimpleMemory 所进行的，以下会给出可靠的指引，根据指引完成美化的需求，和进一步的更改。

基础美化部分请根据此文章进行 ==> https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v2/#/

美化所需文件指引：https://github.com/BNDong/Cnblogs-Theme-SimpleMemory

下载最新版本 bug 版本高些的更加完善

说说我遇到的问题：

1. 背景的尺寸要与文章内要求差不多大，这里介绍一个找壁纸头像什么的网站 pixiv （尊重原创严禁商用）

　　　　小tips ：实现后的关灯的功能~可以让屏幕变暗背景选择较为透明的黑白壁纸在关灯后会显现出来

扩展操作 1.爱心特效

在侧边栏HTML代码中写入以下代码：

<script type="text/javascript">
(function(window,document,undefined){
        var hearts = [];
        window.requestAnimationFrame = (function(){
                return window.requestAnimationFrame || 
                           window.webkitRequestAnimationFrame ||
                           window.mozRequestAnimationFrame ||
                           window.oRequestAnimationFrame ||
                           window.msRequestAnimationFrame ||
                           function (callback){
                                   setTimeout(callback,1000/60);
                           }
        })();
        init();
        function init(){
                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;}");
                attachEvent();
                gameloop();
        }
        function gameloop(){
                for(var i=0;i<hearts.length;i++){
                    if(hearts[i].alpha <=0){
                            document.body.removeChild(hearts[i].el);
                            hearts.splice(i,1);
                            continue;
                    }
                    hearts[i].y--;
                    hearts[i].scale += 0.004;
                    hearts[i].alpha -= 0.013;
                    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;
            }
            requestAnimationFrame(gameloop);
        }
        function attachEvent(){
                var old = typeof window.onclick==="function" && window.onclick;
                window.onclick = function(event){
                        old && old();
                        createHeart(event);
                }
        }
        function createHeart(event){
            var d = document.createElement("div");
            d.className = "heart";
            hearts.push({
                    el : d,
                    x : event.clientX - 5,
                    y : event.clientY - 5,
                    scale : 1,
                    alpha : 1,
                    color : randomColor()
            });
            document.body.appendChild(d);
    }
    function css(css){
            var style = document.createElement("style");
                style.type="text/css";
                try{
                    style.appendChild(document.createTextNode(css));
                }catch(ex){
                    style.styleSheet.cssText = css;
                }
                document.getElementsByTagName('head')[0].appendChild(style);
    }
        function randomColor(){
                return "rgb("+(~~(Math.random()*255))+","+(~~(Math.random()*255))+","+(~~(Math.random()*255))+")";
        }
})(window,document);
</script>

2. 鼠标悬停线条连接特效

在首页HTML代码中写入：

<canvas id="c_n9" width="1920" height="990" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas>
 
<script src="https://files.cnblogs.com/files/siwuxie095/canvas-nest.min.js"></script>

3.全屏背景

只需要把图片的链接把代码的url替换即可

将以下代码写入页面定制CSS代码

1 body {
2     font-size:15px;
3     padding:0;
4     margin:0;
5     font-family:"微软雅黑","宋体",Arial;
6     background:#243B0D 
7     url('https://ts1.cn.mm.bing.net/th/id/R-C.a491441f06560b3325fc6eea0fd75b96?rik=TwMMHjJeZRVroQ&riu=http%3a%2f%2fup.deskcity.org%2fpic_source%2fa4%2f91%2f44%2fa491441f06560b3325fc6eea0fd75b96.jpg&ehk=j1cGyRYUd4UCy9rgu%2bkrhYIcn1qUplA38LnAcbZrUfk%3d&risl=&pid=ImgRaw&r=0') no-repeat top center fixed;
8     min-width:1200px;
9 }

　　　　1) 使用博客园内的文件上传功能使用自己的url 然后在下面的图片上传成功之后点一下就可以得到url 然后替换（我没试过）

　　　　2) 使用网上滴然后自己替换进去我成功了

欢迎指正

标签：function,heart,教程,url,博客园,window,美化
From： https://www.cnblogs.com/centos08/p/16871035.html

相关文章

赞助商

阅读排行