博客美化中遇到的问题汇总

关于代码滚动条

插件

mCustomScrollbar,一个风格简洁优美的滚动条插件

使用条件

需要创建滚动条的元素必须具有明确的CSS属性使元素形成包裹的块级元素：

具有高度值（height）
最大高度值（max-height）
具有overflow属性值为auto或者hidden
元素的内容具有足够的高度（或宽度，针对横向滚动条）

问题

如果使用markdown编辑器插入代码，那么pre标签是不包含在div下的，此时这个插件并不会生效，原因不明，即使对pre设置了display:block;overflow:auto也不会生效，对pre进行渲染会出现mCS_no_scrollbar，所以不会出现滚动条

解决办法

使用tinymce编辑器插入代码，此种方法插入代码pre标签会包含在div下，从而使滚动条可以正常工作

更新：若使用markdown编辑器，可使用jQuery让pre被div包裹，此时可以正常工作

关于背景

问题

我希望能够让背景实现一定透明，从而不影响整个皮肤的效果，但如果直接对body设置opacity，那么所有元素都会有一定的透明度，这不是想要的效果

解决办法

对body:before设置背景，透明度，设置宽度高度均为100%,设置z-index为-1，即在所有元素的后面

代码

body:before{
    background: url(https://img2018.cnblogs.com/blog/1598496/201902/1598496-20190210215015022-4687379.jpg) center/cover no-repeat;
    content: '';
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

关于舍弃的部分

图片立方体

本来博客的美化中加入了图片立方体的美化，但由于换成这个皮肤后加上去比较违和，就没有添加，但这个部分其实挺炫酷的

代码

<style>
        /*最外层容器样式*/
        .wrap {
            width: 100px;
            height: 100px;
            margin: 150px auto;
            position: relative;
        }
 
        /*包裹所有容器样式*/
        .cube {
            width: 50px;
            height: 50px;
            margin: 0 auto;
            transform-style: preserve-3d;
            transform: rotateX(-30deg) rotateY(-80deg);
            animation: rotate linear 20s infinite;
        }
 
        @-webkit-keyframes rotate {
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
 
        .cube div {
            position: absolute;
            width: 200px;
            height: 200px;
            opacity: 0.8;
            transition: all .4s;
        }
 
        /*定义所有图片样式*/
        .pic {
            width: 200px;
            height: 200px;
        }
 
        .cube .out_front {
            transform: rotateY(0deg) translateZ(100px);
        }
 
        .cube .out_back {
            transform: translateZ(-100px) rotateY(180deg);
        }
 
        .cube .out_left {
            transform: rotateY(-90deg) translateZ(100px);
        }
 
        .cube .out_right {
            transform: rotateY(90deg) translateZ(100px);
        }
 
        .cube .out_top {
            transform: rotateX(90deg) translateZ(100px);
        }
 
        .cube .out_bottom {
            transform: rotateX(-90deg) translateZ(100px);
        }
 
        /*定义小正方体样式*/
        .cube span {
            display: block;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50px;
            left: 50px;
        }
 
        .cube .in_pic {
            width: 100px;
            height: 100px;
        }
 
        .cube .in_front {
            transform: rotateY(0deg) translateZ(50px);
        }
 
        .cube .in_back {
            transform: translateZ(-50px) rotateY(180deg);
        }
 
        .cube .in_left {
            transform: rotateY(-90deg) translateZ(50px);
        }
 
        .cube .in_right {
            transform: rotateY(90deg) translateZ(50px);
        }
 
        .cube .in_top {
            transform: rotateX(90deg) translateZ(50px);
        }
 
        .cube .in_bottom {
            transform: rotateX(-90deg) translateZ(50px);
        }
 
        /*鼠标移入后样式*/
        .cube:hover .out_front {
            transform: rotateY(0deg) translateZ(200px);
        }
 
        .cube:hover .out_back {
            transform: translateZ(-200px) rotateY(180deg);
        }
 
        .cube:hover .out_left {
            transform: rotateY(-90deg) translateZ(200px);
        }
 
        .cube:hover .out_right {
            transform: rotateY(90deg) translateZ(200px);
        }
 
        .cube:hover .out_top {
            transform: rotateX(90deg) translateZ(200px);
        }
 
        .cube:hover .out_bottom {
            transform: rotateX(-90deg) translateZ(200px);
        }
    </style>
<div class="wrap">
        <!--包裹所有元素的容器-->
        <div class="cube">
            <!--前面图片 -->
            <div class="out_front">
                <img src="https://img2018.cnblogs.com/blog/1598496/201902/1598496-20190209000304567-606481727.jpg" class="pic">
            </div>
            <!--后面图片 -->
            <div class="out_back">
                <img src="https://img2018.cnblogs.com/blog/1598496/201902/1598496-20190201164226004-434092221.jpg" class="pic">
            </div>
            <!--左面图片 -->
            <div class="out_left">
                <img src="https://img2018.cnblogs.com/blog/1598496/201902/1598496-20190201164230266-1345555907.jpg" class="pic">
            </div>
            <!--右面图片 -->
            <div class="out_right">
                <img src="https://img2018.cnblogs.com/blog/1598496/201902/1598496-20190201164243233-2083889650.jpg" class="pic">
            </div>
            <!--上面图片 -->
            <div class="out_top">
                <img src="https://img2018.cnblogs.com/blog/1598496/201902/1598496-20190201164641298-1758519226.jpg" class="pic">
            </div>
            <!--下面图片 -->
            <div class="out_bottom">
                <img src="https://img2018.cnblogs.com/blog/1598496/201902/1598496-20190201165542378-45065307.jpg" class="pic">
            </div>
 
            <!--小正方体 -->
            <span class="in_front">
                <img src="https://img2018.cnblogs.com/blog/1598496/201902/1598496-20190201165803793-1785729274.jpg" class="in_pic">
            </span>
            <span class="in_back">
                 <img src="https://img2018.cnblogs.com/blog/1598496/201902/1598496-20190201165532456-1361254174.jpg" class="in_pic">
            </span>
            <span class="in_left">
                <img src="https://img2018.cnblogs.com/blog/1598496/201902/1598496-20190201164636013-932342617.jpg" class="in_pic">
            </span>
            <span class="in_right">
                <img src="https://img2018.cnblogs.com/blog/1598496/201902/1598496-20190201164142508-867057695.jpg" class="in_pic">
            </span>
            <span class="in_top">
                <img src="https://img2018.cnblogs.com/blog/1598496/201902/1598496-20190201164137075-1116750383.jpg" class="in_pic">
            </span>
            <span class="in_bottom">
                <img src="https://img2018.cnblogs.com/blog/1598496/201902/1598496-20190201164122124-1147578009.png" class="in_pic">
            </span>
</div>

旋转球体

同样十分炫酷

代码

html

<div class="container">
    <div class="cube cube--1">
        <div class="side side--back">
            <div class="side__inner"></div>
        </div>
        <div class="side side--left">
            <div class="side__inner"></div>
        </div>
        <div class="side side--right">
            <div class="side__inner"></div>
        </div>
        <div class="side side--top">
            <div class="side__inner"></div>
        </div>
        <div class="side side--bottom">
            <div class="side__inner"></div>
        </div>
        <div class="side side--front">
            <div class="side__inner"></div>
        </div>
    </div>
    
    <div class="cube cube--2">
        <div class="side side--back">
            <div class="side__inner"></div>
        </div>
        <div class="side side--left">
            <div class="side__inner"></div>
        </div>
        <div class="side side--right">
            <div class="side__inner"></div>
        </div>
        <div class="side side--top">
            <div class="side__inner"></div>
        </div>
        <div class="side side--bottom">
            <div class="side__inner"></div>
        </div>
        <div class="side side--front">
            <div class="side__inner"></div>
        </div>
    </div>
    
    <div class="cube cube--3">
        <div class="side side--back">
            <div class="side__inner"></div>
        </div>
        <div class="side side--left">
            <div class="side__inner"></div>
        </div>
        <div class="side side--right">
            <div class="side__inner"></div>
        </div>
        <div class="side side--top">
            <div class="side__inner"></div>
        </div>
        <div class="side side--bottom">
            <div class="side__inner"></div>
        </div>
        <div class="side side--front">
            <div class="side__inner"></div>
        </div>
    </div>
</div>

css

.container {
  width: 10em;
  height: 10em;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: rotate 12s infinite linear;
          animation: rotate 12s infinite linear;
}

.cube {
  position: absolute;
  width: 10em;
  height: 10em;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.cube--2 {
  -webkit-transform: rotateX(45deg) rotateY(45deg);
          transform: rotateX(45deg) rotateY(45deg);
}
.cube--3 {
  -webkit-transform: rotateX(45deg) rotateZ(45deg);
          transform: rotateX(45deg) rotateZ(45deg);
}

.side {
  position: absolute;
  width: 10em;
  height: 10em;
  border: 2px dotted rgba(255, 213, 0, 0.35);
  border-radius: 50%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.side::before, .side::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  box-sizing: border-box;
  border-radius: inherit;
  border: 1px solid;
  box-shadow: inset 0 0 2em, 0 0 2em;
}
.side::before {
  width: 2.5em;
  height: 2.5em;
  color: gold;
}
.side::after {
  width: 1.5em;
  height: 1.5em;
  -webkit-transform: translateZ(-2em);
          transform: translateZ(-2em);
  box-shadow: inset 0 0 1em, 0 0 1em;
  color: teal;
}

.side--back {
  -webkit-transform: translateZ(-5em) rotateY(180deg);
          transform: translateZ(-5em) rotateY(180deg);
}

.side--left {
  -webkit-transform: translateX(-5em) rotateY(-90deg);
          transform: translateX(-5em) rotateY(-90deg);
}

.side--right {
  -webkit-transform: translateX(5em) rotateY(90deg);
          transform: translateX(5em) rotateY(90deg);
}

.side--top {
  -webkit-transform: translateY(-5em) rotateX(90deg);
          transform: translateY(-5em) rotateX(90deg);
}

.side--bottom {
  -webkit-transform: translateY(5em) rotateX(-90deg);
          transform: translateY(5em) rotateX(-90deg);
}

.side--front {
  -webkit-transform: translateZ(5em);
          transform: translateZ(5em);
}

.side__inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  width: 5em;
  height: 5em;
  margin: auto;
  border-radius: inherit;
  border: 1px solid;
  box-shadow: inset 0 0 2em;
  color: orangered;
  -webkit-transform: translateZ(2em);
          transform: translateZ(2em);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.side__inner::before, .side__inner::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  box-sizing: border-box;
  border-radius: inherit;
  border: 1px solid;
  box-shadow: inset 0 0 2em, 0 0 2em;
}
.side__inner::before {
  width: 2.5em;
  height: 2.5em;
  -webkit-transform: translateZ(2em);
          transform: translateZ(2em);
  color:#999;
}
.side__inner::after {
  width: 1.5em;
  height: 1.5em;
  -webkit-transform: translateZ(4em);
          transform: translateZ(4em);
  color:#6CF;
}

@-webkit-keyframes rotate {
  100% {
    -webkit-transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
            transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
  }
}

@keyframes rotate {
  100% {
    -webkit-transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
            transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
  }
}

@-webkit-keyframes fadeIn {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 0.4;
            }
            100% {
                opacity: 0.8; 
            }
        }

markdown下代码行号渲染

也是和当前主题不和，故舍弃，其实还蛮好用的

代码

<script src="//cdn.bootcss.com/highlightjs-line-numbers.js/1.1.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>

磁性吸附特效

由于背景已经有了彩带特效，再加上这个太花了，也舍弃了

代码

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

修改opacity可以改变深浅

返回顶部

一个非常好看的返回顶部的特效，动画效果比较棒，而且很流畅，由于与主题不和而舍弃

css样式

#back-to-top {
    cursor: pointer;
    position: fixed;
    right: 50px;
    top: -900px;
    z-index: 2;
    width: 70px;
    height: 900px;
    background-image: url(https://file.ohyhello.com/uploads/2018/08/scroll.png);
    transition: all .5s ease-in-out;
    top: -20px;
}

html+js代码

<div id="back-to-top" class="red active" data-scroll="body" style="top: -274px;"></div>
<script type="text/javascript">
$.scrollto = function (scrolldom, scrolltime) {
        $(scrolldom).click(function () {
            var scrolltodom = $(this).attr("data-scroll");
            $(this).addClass("active").siblings().removeClass("active");
            $('html, body').animate({
                scrollTop: $(scrolltodom).offset().top
            }, scrolltime);
            return false;
        });
    };
    // 判断位置控制 返回顶部的显隐
    if ($(window).width() > 800) {
        var backTo = $("#back-to-top");
        var backHeight = $(window).height() - 980 + 'px';
        $(window).scroll(function () {
            if ($(window).scrollTop() > 700 && backTo.css('top') === '-900px') {
                backTo.css('top', backHeight);
            }
            else if ($(window).scrollTop() <= 700 && backTo.css('top') !== '-900px') {
                backTo.css('top', '-900px');
            }
        });
    }
    // 启用
    $.scrollto("#back-to-top", 800);
</script>

放在页首定制html代码中

关于随机图片的api

有一个图片质量很棒的二次元api，由于在本博客现样式中间不透明度为90%左右，所以会遮挡大部分人脸，故换成了人物在两侧的固定背景，舍弃了该api

地址

https://random.52ecy.cn/randbg.php?type=302&style=3

结语

美化博客真的耗了很多时间，也算是告一段落了，这个主题真的好看，让我直接舍弃了之前花了很多时间自己美化的部分，感谢主题的作者bndong。

要赶快开始学习了orz

一时折腾一时爽，一直折腾一直爽

（就是光爽了，icpc要被众大佬吊打了）

posted @ 2019-02-12 15:22 Artoriax 阅读(403) 评论(0) 编辑收藏举报

刷新页面返回顶部

Artoriax

博客美化中遇到的问题汇总

关于代码滚动条

插件

使用条件

问题

解决办法

关于背景

问题

解决办法

代码

关于舍弃的部分

图片立方体

代码

旋转球体

代码

markdown下代码行号渲染

代码

磁性吸附特效

代码

返回顶部

css样式

html+js代码

关于随机图片的api

地址

结语

公告