zoukankan      html  css  js  c++  java
  • 博客园页面美化

     对以前的我来说,我觉得博客只有自己搭建的才有页面美化,像博客园这样的可能没有。但是,突然有一天在我查资料的时候,发现了一篇很好看的博客,我就留意了一下他的域名,发现竟然是博客园的。就开始决定把自己的博客弄的好看一点。

      关于博客应该如何去美化,我就不讲了,自己去设置里面看的到,之后开启过JS权限之后就可以开始自己的美化了。

     关于我为啥要写这篇博客,主要原因是,网上关于博客美化的博客太散了,没有那种比较全面的讲解,于是我就想弄一个,以便后面的人做个参考。

    首先是选择博客的皮肤:

      毕竟自己不能从零开始写一个页面的css文件,所以就挑一个顺眼的博客皮肤用着。

      下面这个就是用来存放css代码的地方,此外如果css代码过长也可以上传到博客,到时候直接调用就好

     

    下面我就来讲下我目前弄的css代码:

    第一个:
    飘雪花的代码
    #Snow{
         position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 99999;
          background: rgba(255,255,240,0.1);
          pointer-events: none;
     }这个丢在CSS代码里面
    之后再把下面的丢在侧板栏公告的里面就好
        <!--雪花-->
    <div class="Snow">
        <canvas id="Snow"></canvas>
    </div>
    <script src="https://files.cnblogs.com/files/cn-suqingnian/snow.js"></script>
    第二个:博客背景的设置和块的透明化
    body {
      background: url(https://i.loli.net/2019/08/08/zO25erCJysiQZLk.png) fixed;
      url的括号里面放图片的链接,可以把图片丢图床里面做个链接
      background-size: cover;
      background-position: 50% 5%;
      background-repeat: no-repeat;
    }
    下面就是块的透明化
    div{
    opacity:0.96;
    }
    第三个:
        侧面公告栏的音乐导入
        下面这个是网易云音乐的外链播放器,去网页版的网易云音乐里面找到你喜欢的歌,再点击生成外链播放器就好(注意:博客园不支持iframe标签,需要将其改为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>
    第四个
    头像的放置
    <img src="https://www.z4a.net/images/2019/08/06/71179231_p0_master1200.md.jpg" alt="WZ的头像" height=180 width=180 class="img_avatar">
    第五个:
            鼠标点击爱心特效
            <!-- 爱心特效 -->
    <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{ 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: ''; 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);

    最后一个是Live2d的二次元看板娘

      由于内容稍微有点多,具体的操作可以参考这篇博客:

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

    最后,希望我写的这么点东西能对大家有些许的帮助,欢迎大家和我交流一切技术上的问题,希望和大家都能成为朋友。

  • 相关阅读:
    67. Add Binary
    66. Plus One
    64. Minimum Path Sum
    63. Unique Paths II
    How to skip all the wizard pages and go directly to the installation process?
    Inno Setup打包之先卸载再安装
    How to change the header background color of a QTableView
    Openstack object list 一次最多有一万个 object
    Openstack 的 Log 在 /var/log/syslog 里 【Ubuntu】
    Git 分支
  • 原文地址:https://www.cnblogs.com/printwangzhe/p/11682099.html
Copyright © 2011-2022 走看看