##头像呼吸光环和鼠标悬停旋转放大##
打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*头像呼吸光环和鼠标悬停旋转放大*/
.img-full {
    width: 100px;
    border-radius: 50%;
    animation: light 4s ease-in-out infinite;
    transition: 0.5s;
}

.img-full:hover {
    transform: scale(1.15) rotate(720deg);
}

@keyframes light {
    0% {
        box-shadow: 0 0 4px #f00;
    }

    25% {
        box-shadow: 0 0 16px #0f0;
    }

    50% {
        box-shadow: 0 0 4px #00f;
    }

    75% {
        box-shadow: 0 0 16px #0f0;
    }

    100% {
        box-shadow: 0 0 4px #f00;
    }
}

##首页评论自动排名##
打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*首页评论自动排名*/

    .autofirst1 .item{

        padding:5px 10px

      }

    .item a{border-radius:10px}

    .overflow{

        overflow:hidden;

        white-space: nowrap;

        word-wrap: normal;

      }

    .autofirst1{

        padding:10px 20px

    }

##首页文章图片获取焦点放大##
打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*首页文章图片获取焦点放大*/

.item-thumb{

    cursor: pointer;  

    transition: all 0.6s;  

}

.item-thumb:hover{

      transform: scale(1.05);  

}

.item-thumb-small{

    cursor: pointer;  

    transition: all 0.6s;

}

.item-thumb-small:hover{

    transform: scale(1.05);

}

##首页文章版式圆角化##
打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*首页文章版式圆角化*/

.panel{

    border: none;

    border-radius: 15px;

}

.panel-small{

    border: none;

    border-radius: 15px;

}

.item-thumb{

    border-radius: 15px;  

}

##首页文章版式阴影化##
打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*panel阴影*/

.app.container {

    box-shadow: 0 0 30px rgba(173, 216, 230, 0.35);

}

.panel{

   box-shadow: 1px 1px 5px 5px rgba(169, 169, 169, 0.35);

    -moz-box-shadow: 1px 1px 5px 5px rgba(169, 169, 169, 0.35);

}

.panel:hover{

    box-shadow: 1px 1px 5px 5px rgba(173, 216, 230, 0.35);

    -moz-box-shadow: 1px 1px 5px 5px rgba(173, 216, 230, 0.35);

}

.panel-small{

    box-shadow: 1px 1px 5px 5px rgba(169, 169, 169, 0.35);

    -moz-box-shadow: 1px 1px 5px 5px rgba(169, 169, 169, 0.35);

}

.panel-small:hover{

    box-shadow: 1px 1px 5px 5px rgba(173, 216, 230, 0.35);

    -moz-box-shadow: 1px 1px 5px 5px rgba(173, 216, 230, 0.35);

##右侧列表导航栏图标颜色##
打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS即可

/*右侧列表导航栏图标颜色*/

.glyphicon-fire {

    color: #ff0000;

}

.nav-tabs-alt .glyphicon-comment {

    color: #495dc3;

}

.glyphicon-transfer {

    color: #0e5458;

}

##彩色标签云##
打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript即可

<!--彩色标签云-->

let tags = document.querySelectorAll("#tag_cloud-2 a");

let colorArr = ["#428BCA", "#AEDCAE", "#ECA9A7", "#DA99FF", "#FFB380", "#D9B999"];

tags.forEach(tag => {

    tagsColor = colorArr[Math.floor(Math.random() * colorArr.length)];

    tag.style.backgroundColor = tagsColor;

});

##背景云雾特效##
1.打开后台-更改外观-设置外观-开发者设置-复制以下代码粘贴至自定义CSS

{margin:0;padding:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}figure{margin:0}.absolute-bg{position:absolute;top:0;left:0;z-index:0;height:100%;width:100%;background-position:50%;background-repeat:no-repeat;background-size:cover;overflow:hidden}.fog{position:relative;height:100vh;width:100%;position:fixed;top:0;z-index:-1}.fog__container{position:absolute;height:100%;width:100%;overflow:hidden}.fog__img{position:absolute;height:100vh;width:300vw}.fog__img--first{background:url("https://ae01.alicdn.com/kf/Ud713fee99c5d4f2bac69dd0469a95b13e.png") repeat-x;background-size:contain;background-position:center;-webkit-animation:marquee 60s linear infinite;animation:marquee 60s linear infinite}.fog__img--second{background:url("https://ae01.alicdn.com/kf/Ub5631e112d7742cbb3cab47a304b80f4T.png") repeat-x;background-size:contain;background-position:center;-webkit-animation:marquee 40s linear infinite;animation:marquee 40s linear infinite}@media screen and (max-width:767px){.fog__img--first{-webkit-animation:marquee 6s linear infinite;animation:marquee 6s linear infinite}.fog__img--second{-webkit-animation:marquee 6s linear infinite;animation:marquee 6s linear infinite}}@-webkit-keyframes marquee{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{-webkit-transform:translate3d(-200vw,0,0);transform:translate3d(-200vw,0,0)}}@keyframes marquee{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}100%{-webkit-transform:translate3d(-200vw,0,0);transform:translate3d(-200vw,0,0)}}

2.在component/footer.php中搜索<?php $this->footer(); ?>,在这一行上面添加以下代码

    <section class="fog">
        <div class="fog__container">
            <div class="fog__img fog__img--first"></div>
            <div class="fog__img fog__img--second"></div>
        </div>
    </section>

这个时候您的博客应该有云在飘了,如果您想获得蓝天,那么主题背景可以设置为纯色背景,颜色可以设置为#1B8FFF

##设置随机播放音乐##
将以下代码加入文件handsome/libs/Get.php的186行下面

shuffle($info);

##B站视频挂载##
1.打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义CSS

/*视频挂载*/

.iframe_video {
    position: relative;
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .iframe_video {
        height: 15em;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .iframe_video {
        height: 20em;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .iframe_video {
        height: 30em;
    }
}

@media only screen and (min-width: 1200px) {
    .iframe_video {
        height: 40em;
    }
}

.iframe_cross {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%
}

.iframe_cross iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

2.复制视频源代码:打开B站视频网页,如图找到嵌入代码然后复制(好像B站的番剧动漫没有这个代码)
[嵌入代码
3.给iframe标签添加class="iframe_video",如下:

<iframe class="iframe_video" src="//player.bilibili.com/player.html?aid=11932135&cid=19697229&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

4.将修改后的代码复制到你的文章内容里,就可以查看效果了

以上内容转载至互联网,如有侵权请联系我!

免责声明

本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。如有侵权请邮件 与我联系(admin@jx-ll.cn) ,我会及时处理。敬请谅解!
Last modification:December 6th, 2019 at 01:54 pm
If you think my article is useful to you, please feel free to appreciate