分享本站css代码

　　本站css代码收集于网络，摘自百度搜狐和Q群，原创作者已无从考究，感谢作者分享，如无意中侵权，请联系本人删除。

1.首页头像悬停转动 

/*首页头像悬停转动*/
.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
}

2.首页文章版式圆角化 

/*首页文章版式圆角化,整体大小位置*/
.panel{
    border: none;
    border-radius: 7px;
}

.panel-small{
    border: none;
    border-radius: 7px;
}

.item-thumb{
    border-radius: 7px;  
}

3.文章标题居中 

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

4.放大进入 

/*放大进入*/
/*CodeBlock*/
@keyframes elastic{0%{transform:scale(0)}55%{transform:scale(1)}70%{transform:scale(.98)}100%{transform:scale(1)}}

5.panel阴影 

#阴影颜色修改rgba后面的值
/*panel阴影*/
.panel{
   box-shadow: 1px 1px 5px 5px rgba(255, 192, 203, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 192, 203, 0.35);
}

.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(255, 192, 203, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 192, 203, 0.35);
}

.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(255, 192, 203, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 192, 203, 0.35);
}

.panel-small:hover{
    box-shadow: 1px 1px 5px 5px rgba(255, 192, 203, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 192, 203, 0.35);
}

.app.container {
    box-shadow: 0 0 30px rgba(255, 192, 203, 0.35);
}

6.盒子模型四周阴影 

/*盒子模式四周阴影*/
.app.container {
    box-shadow: 0 0 30px rgba(255, 192, 203, 0.35);
}
#comments {
    padding: 4%!important;
}

7.图片居中 

/*图片居中,后面几行是为了把表情弄正常了，不然表情也独占一行了*/
img{
   display: table-cell;
}
.emotion-twemoji,.emotion-funny,.emotion-aru{
display: inline;
}

8.文章内打赏图标跳动 

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

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

    to {
        transform: scale(1.1);
    }
}

9.头像呼吸光环和鼠标悬停旋转放大 

/*头像呼吸光环和鼠标悬停旋转放大*/
.img-full {
    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;
    }
}

10.浏览器动态标题

　　效果可参考本站，切换浏览器窗口时即可看到
　　方法以及代码如下
　　主题设置 - 开发者设置 - 自定义输出body尾部的HTML代码添加以下代码

<!--浏览器动态标题开始-->
<script>
 var OriginTitle = document.title;
 var titleTime;
 document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         $('[rel="icon"]').attr('href', "//7ipan.com/tu/logo.png");
         document.title = 'ヽ(●-`Д´-)ノ别走啊！';
         clearTimeout(titleTime);
     }
     else {
         $('[rel="icon"]').attr('href', "//7ipan.com/tu/logo.png");
         document.title = 'ヾ(Ő∀Ő3)ノ想我啦~！' + OriginTitle;
         titleTime = setTimeout(function () {
             document.title = OriginTitle;
         }, 2000);
     }
 });
</script>
<!--浏览器动态标题结束-->

Last modification：December 9, 2020
© Allow specification reprint
如果你想请我喝一盒安慕希