首页文章版式圆角化
本项修改的是首页文章版式，包括图片使其四个角由方形变成圆角形状。

 #圆角大小可修改15px数值(别复制该行)
    /*首页文章版式圆角化*/
    .panel{
        border: none;
        border-radius: 15px;
    }
    
    .panel-small{
        border: none;
        border-radius: 15px;
    }
    
    .item-thumb{
        border-radius: 15px;  
    }

首页文章图片获取焦点放大
本项修改的是首页文章图片，将鼠标放到首页头图后使其放大。

 #放大的时间和大小自行修改以下数值(别复制该行)
    /*首页文章图片获取焦点放大*/
    .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);
    }   

首页头像转动并放大
本项修改的是首页头像，将鼠标放至头像后使其转动并放大。

   #转动快慢和头像大小自行修改数值(别复制该行)
    /*首页头像自动旋转*/
    .thumb-lg{
        width:130px;
    }
    
    .avatar{
        -webkit-transition: 0.4s;
        -webkit-transition: -webkit-transform 0.4s ease-out;
        transition: transform 0.4s ease-out;
        -moz-transition: -moz-transform 0.4s ease-out; 
    }
    
    .avatar:hover{
        transform: rotateZ(360deg);
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
    }
    
    #aside-user span.avatar{
        animation-timing-function:cubic-bezier(0,0,.07,1)!important;
        border:0 solid
    }
    
    #aside-user span.avatar:hover{
        transform:rotate(360deg) scale(1.2);
        border-width:5px;
        animation:avatar .5s
    }

首页头像自动旋转
本项修改的是首页头像，效果就是首页使其自动旋转。

 #旋转速度请修改3s数值(别复制该行)
    /*首页头像放大并自动旋转*/
    .thumb-lg{
        width:130px;
    }
    
    @-webkit-keyframes rotation{
        from {
            -webkit-transform: rotate(0deg);
        }
        to {
            -webkit-transform: rotate(360deg);
        }
    }
    
    .img-full{
        -webkit-transform: rotate(360deg);
        animation: rotation 3s linear infinite;
        -moz-animation: rotation 3s linear infinite;
        -webkit-animation: rotation 3s linear infinite;
        -o-animation: rotation 3s linear infinite;
    }

文章标题居中
本项修改的是文章标题。

    /*文章标题居中*/
    .panel h2{
        text-align: center; 
    }
    .post-item-foot-icon{
        text-align: center;
    }

首页文章版式阴影化
本项修改的是首页文章版式，包括图片使其四周加上一层绚丽的阴影。

 #阴影颜色修改rgba后面的值(别复制该行)
    /*panel阴影*/
    .panel{
       box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
        -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    }
    
    .panel:hover{
        box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
        -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    }
    
    .panel-small{
        box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
        -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    }
    
    .panel-small:hover{
        box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
        -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    }
    
    /*如果也想使盒子四周也有阴影，加上以下代码*/
    .app.container {
        box-shadow: 0 0 30px rgba(255, 112, 173, 0.35);
    }

自定义滚动条滑块
本项修改针对浏览器最右边的滚动条滑块，使其改变样式。

  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    ::-webkit-scrollbar{
        width: 3px;
        height: 16px;
        background-color: rgba(255,255,255,0);
    }
     
    /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-track{
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 10px;
        background-color: rgba(255,255,255,0);
    }
     
    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb{
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #555;
    }

鼠标点击特效
将以下代码放在主题的handsome/component/footer.php中的</body>之前即可。

  #字体自行修改
    <script type="text/javascript"> 
    /* 鼠标特效 */
    var a_idx = 0; 
    jQuery(document).ready(function($) { 
        $("body").click(function(e) { 
            var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); 
            var $i = $("<span/>").text(a[a_idx]); 
            a_idx = (a_idx + 1) % a.length; 
            var x = e.pageX, 
            y = e.pageY; 
            $i.css({ 
                "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, 
                "top": y - 20, 
                "left": x, 
                "position": "absolute", 
                "font-weight": "bold", 
                "color": "#ff6651" 
            }); 
            $("body").append($i); 
            $i.animate({ 
                "top": y - 180, 
                "opacity": 0 
            }, 
            1500, 
            function() { 
                $i.remove(); 
            }); 
        }); 
    }); 
    </script>

原文出处传送门：Rat's 何以解忧，唯有暴富。

后续增加来啦！！！

左侧文章图标和评论头像鼠标悬停旋转

/*左侧文章图标和评论头像鼠标悬停旋转*/
.img-circle {
    transition: all 0.3s;
}

.img-circle:hover {
    transform: rotate(360deg);
}

打赏图标跳动

/*文章内打赏图标跳动*/
.btn-pay {
    animation: star 0.5s ease-in-out infinite alternate;
}

@keyframes star {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.1);
    }
}

彩色标签云

<!--彩色标签云-->
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;
});

首页文章列表悬停上浮

/*首页文章列表悬停上浮*/
.blog-post .panel:not(article) {
    transition: all 0.3s;
}

.blog-post .panel:not(article):hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 10px rgba(73, 90, 47, 0.47);
}

首页文章列表头图悬停放大并将超出范围隐藏

/*首页文章列表头图悬停放大并将超出范围隐藏*/
.index-post-img {
    overflow: hidden;
}

.item-thumb {
    transition: all 0.3s;
}

.item-thumb:hover {
    transform: scale(1.1)
}

文章内头图和文章图片悬停放大并将超出范围隐藏

/*文章内头图和文章图片悬停放大并将超出范围隐藏*/
.entry-thumbnail {
    overflow: hidden;
}

#post-content img {
    border-radius: 10px;
    transition: 0.5s;
}

#post-content img:hover {
    transform: scale(1.05);
}

复制弹框

首先将下方代码复制添加至后台主题设置自定义输出body 尾部的HTML代码

<!--复制弹框-->
document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处！',showConfirmButton: false,timer: 2000});};

最后复制下方代码打开后台-更改外观-设置外观-开发者设置-复制代码粘贴至自定义JavaScript即可

<!--复制弹框-->
document.body.oncopy = function() {layer.msg('复制成功，若要转载请务必保留本文链接！');};

文本框打字机特效

<!--文本框打字机特效-->
<script type="text/javascript" src="https://lioeo.cn/usr/commentTyping.js"></script>

再来一个出处：云雾！！

版权属于：月丶小柒’s Blog

本文链接：https://www.xiaoqi22.cn/archives/20211014/257.html

版权声明：若无注明，本文皆为“月丶小柒’s Blog”原创，所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。 您可以自由的转载和修改，但请务必注明文章来源且不可用于商业目的