Park beautification blog page

　To the old me, I feel only their own blog pages have built landscaping, garden blog might not like this. But suddenly one day, when I checked the information and found a good look at the blog, I'll watch a bit of his domain, that turned out to blog Park. He decided to start his own blog to get the look better.

　　After the blog on how to beautify, I do not speak their own to set up inside to look after JS turned over authority can start their own landscaping.

　About why I write this blog, the main reason is that the Internet blog on blog landscaping too scattered, not that kind of a more comprehensive explanation, so I Xiangnong one person to be a reference to the back.

The first is the choice of skin blog:

　　After all, you can not write a page from scratch css file, so pleasing to the eye to pick a blog with the skin.

　　The following code is used to store css place, moreover if css code is too long can also be uploaded to the blog, that time is like a direct call

 

Here I will get in terms of my current css code:

First:
Snow flower code
#Snow{
     position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 99999;
      background: rgba(255,255,240,0.1);
      pointer-events: none;
 } The CSS code inside the cast
After then lost the following announcement in the side bar inside like
    <! - snow ->
<div class="Snow">
    <canvas id="Snow"></canvas>
</div>
<script src="https://files.cnblogs.com/files/cn-suqingnian/snow.js"></script>

Second: setting transparency and background blocks blog
body {
　　background: url(https://i.loli.net/2019/08/08/zO25erCJysiQZLk.png) fixed;
　　Url inside the brackets put pictures of links, images can throw inside to be a link map bed
　　background-size: cover;
　　background-position: 50% 5%;
　　background-repeat: no-repeat;
}
Here is transparent blocks
div{
opacity:0.96;
}
The third:
    Importing music side bulletin board
    The following is the NetEase cloud music player outside the chain, to the Web version of Netease cloud music inside to find your favorite songs, and then click Generate outside the chain players like (note: blog garden does not support iframe tags, you need to change it embed)
    <embed frameborder="no" border="0" marginwidth="0" marginheight="0" width=230height=86 src="//music.163.com/outchain/player?type=2&id=820665&auto=0&height=66"></embed>
the fourth
Avatar placement
<img src="https://www.z4a.net/images/2019/08/06/71179231_p0_master1200.md.jpg" alt="WZ的头像" height=180 width=180 class="img_avatar">

the fifth:
        Love mouse click effects
        <-! Love effects ->
<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({
                    on: 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);

The last one is the second element Live2d billboards Niang

　　Since the content a little bit more, specific operations can refer to this blog:

　　https://www.cnblogs.com/kousak/p/9726514.html

Finally, I hope I can write something so slightly to help all of us, and I welcome questions we all technical exchange, and hope we can become friends.