我的网站的css设置

有人对我的网站的css设置感兴趣,我就把css代码分享出来,主要就是首页文章标题动态阴影遮罩这些。个人感觉没有太花哨,比原来的稍微看起来和谐一些。食用起来非常简单,直接全部复制,然后放在主题后台自定义css代码处即可(这是我认为最合适的自定义css方法,尽量不要在原主题文件上随便魔改,一旦主题升级很麻烦)。代码我也是东拼西凑整理的,不是原创,也没啥特别的,随便取用。

/*main首页动态遮罩*/
@charset "utf8";
/*main*/
.entry-content {
    background-color: transparent
}

.panel-small .post-meta {
    padding: 25px 30px 15px 25px!important
}

.panel-small .pos50t-meta {
    padding-left: 25px;
    padding-right: 25px
}

.b-light {
    border-color: #bbb4
}

.tip:before {
    margin-top: 0!important
}

.wrapper-md .panel:not(.b-a),.wrapper-md .panel-small {
    transition: all .2s;
    box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.2)!important;
}

.wrapper-md .panel:not(.b-a):hover,.wrapper-md .panel-small:hover {
    box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.3)!important;
}

.list-group-item {
    background-color: rgba(255,255,255,.8)
}

.thumb-lg {
    width: 130px
}

#widget-tabs-4-comments .list-group-item,#tag_toc,#post-panel,#sidebar,#post-content {
    background-color: transparent!important
}

#alllayout.app-aside-folded .tooltip {
    display: none!important
}

.standpage {
    width: 100%;
    height: calc(100% - 50px);
    position: fixed;
    top: 50px;
    left: 0
}

.standpage,aside,aside * {
    transition: all .3s
}

@media screen and (min-width:768px) {
    .topButton.panel.panel-default {
        display: none
    }

    #bg,.standpage {
        left: 200px
    }

    .standpage {
        height: calc(100% - 101px);
        width: calc(100% - 200px)
    }

    .app-aside-folded #bg,.app-aside-folded .standpage {
        left: 60px
    }

    .app-aside-folded .standpage {
        width: calc(100% - 60px)
    }
}

.wrapper-md>#comments,.wrapper-md>.blog-post,.wrapper-md>.breadcrumb,.m-t-lg.m-b-lg,.wrapper-md>.no_search_result {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto
}

.wrapper-md .panel,.wrapper-md .panel-small,.wrapper-md>#comments,.wrapper-md>.breadcrumb {
    background-color: rgba(255,255,255,.9)
}

.wrapper-md article,.wrapper-md>#comments {
    border-radius: 5px;
    overflow: hidden
}

.bg-auto:before {
    bottom: 51px
}

@media screen and (max-width:991px) {
    

    aside.col.no-border-xs {
        border: 0;
        opacity: 1!important;
        background-color: rgba(255,255,255,.8)
    }
}

@media screen and (min-width:992px) {
    aside.col.w-md.b-l {
        background-color: rgba(255,255,255,.7)
    }

    aside.col.w-md.b-l:hover {
        background-color: #fff
    }
}

header.wrapper-md {
    background-color: rgba(246,248,248,.93)!important
}

.blog-post>.panel,.blog-post>.panel-small {
    border: 0;
    border-radius: 5px
}

.index-post-img,.index-post-img-small {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    overflow: hidden
}

.blog-post>.panel .index-post-img .item-thumb,.panel-small .index-post-img-small .item-thumb-small,.index-post-title a {
    transition: all .2s
}

.blog-post>.panel:hover .index-post-img .item-thumb,.blog-post>.panel-small:hover .index-post-img-small .item-thumb-small {
    transform: scale(1.05)
}

#footer>.wrapper {
    background-color: rgba(237,241,242,.8)
}

.streamline {
    margin-left: 20px;
    padding-right: 10px
}

.streamline .comment-body {
    position: relative
}

.streamline .comment-body .m-l-lg:before {
    background-color: rgba(255,255,255,.9);
    content: " ";
    position: absolute;
    width: calc(100% + 10px);
    height: calc(100% + 20px);
    top: -10px;
    left: 0;
    z-index: -1;
    border-radius: 2px;
    box-shadow: 0 0 2px 2px rgba(0,0,0,.125)
}

aside.col.w-md.no-border-xs {
    transition: all .3s
}

.visible-xs-inline {
    display: inline-block!important
}

@media screen and (min-width:768px) and (max-width:1140px) {
    .visible-xs-inline {
        display: none!important
    }
}

.tocify-item {
    background-color: rgba(255,255,255,.8)
}

.tocify-item.active {
    color: #7266ba;
    font-weight: 700
}
/*kotori*/
#kotori {
    position: absolute;
    left: -15px;
    bottom: -15px;
    max-height: 110px;
    transition: all .3s
}

#kotori:hover {
    left: 0;
    bottom: 0
}

#kotori.hidekotori {
    left: -110px;
    bottom: -110px
}

@media screen and (max-width:767px) {
    #kotori {
        display: none
    }

    .blog-post>.panel:hover .index-post-img .item-thumb {
        transform: none!important
    }
}

.index-post-title a:hover {
    color: #2ebaae
}

.wrapper-md .comment-list .comment-parent,.wrapper-md .comment-list .comment-children {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #ddd;
    padding-top: 10px
}

.max-img {
    max-height: 400px
}

.navi-wrap .navi.clearfix>ul.nav {
    padding-bottom: 100px
}

.app-aside-folded.navi-wrap {
    max-height: calc(100% - 50px)
}

.lg-backdrop {
    background-color: rgba(0,0,0,.8)
}

.skPlayer-name {
    font-family: "Source Sans Pro","Hiragino Sans GB","Microsoft Yahei",SimSun,Helvetica,Arial,Sans-serif
}

html.fancybox-enabled {
    overflow-y: auto
}

.fancybox-bg {
    background-color: rgba(0,0,0,.95)
}

.fancybox-arrow:after {
    background-color: rgba(0,0,0,.8)
}

.blog-post .post-meta.wrapper-lg {
    padding-top: 15px;
}

.share,.yellow,.red,.lblue,.green {
    background-position-y: 50%
}

.timeline .tl-date {
    color: #fff;
    text-shadow: 0 0 4px #000
}

body.modal-open {
    overflow-y: auto;
    padding-right: 0 !important
}

.reply2view {
    background-color: transparent;
    border: solid 1px #bbb
}

#content {
    transition: all .3s
}

.OwO .OwO-logo {
    height: 28px
}

#tag_toc.fixed #toc {
    width: 100%
}

.page-navigator .next a,.page-navigator .prev a {
    height: 31px
}

.page-navigator>li:last-child>a,.page-navigator>li:last-child>span {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px
}

.item-thumb-small {
    background-position: left
}

@media screen and (min-width:1200px) {
    .sticky {
        position: absolute;
        top: 10px;
        left: 15px
    }

    .panel .item-thumb {
        height: 300px
    }

    #post-panel .blog-post {
        position: relative
    }

    #post-panel .panel {
        overflow: hidden
    }

    #post-panel .panel .post-meta {
        position: relative;
        margin-top: -300px;
        height: 300px;
        padding-top: 133px!important;
        padding-bottom: 0!important;
        background-color: rgba(0,0,0,.3);
        color: #fff!important;
        transition: all .3s;
    }

    #post-panel .panel .post-meta,#post-panel .panel-small .post-meta {
        border-radius: 5px;
    }

    #post-panel .panel .post-meta *,#post-panel .panel-small .post-meta * {
        color: #fff!important
    }

    #post-panel .panel .post-meta>h2,#post-panel .panel-small .post-meta>h2 {
        text-align: center;
        text-shadow: 0 0 3px #fff
    }

    #post-panel .panel .post-meta>p,#post-panel .panel .post-meta>div,#post-panel .panel-small .post-meta>p,#post-panel .panel-small .post-meta>div {
        transition: all .3s;
        transform: translateY(-10px);
        opacity: 0
    }

    #post-panel .panel .post-meta>.text-muted,#post-panel .panel-small .post-meta>.text-muted {
        position: absolute;
        bottom: 20px
    }

    #post-panel .panel .post-meta>.line {
        position: absolute;
        bottom: 40px;
        width: 740px
    }

    #post-panel .panel-small .post-meta>.line {
        position: absolute;
        bottom: 40px;
        width: 350px
    }

    #post-panel .panel .post-meta>.summary {
        position: absolute;
        bottom: 60px;
        width: 92%
    }

    #post-panel .panel-small .post-meta>.summary {
        position: absolute;
        bottom: 60px;
        width: 350px
    }

    #post-panel .panel-small {
        display: inline-block;
        height: 300px;
        width: calc(50% - 10px);
        margin-right: 20px
    }

    #post-panel .panel-small:nth-child(2n) {
        margin-right: 0
    }

    #post-panel .panel-small .index-img-small,#post-panel .panel-small .index-img-small .item-thumb-small {
        height: 100%;
        width: 100%
    }

    #post-panel .panel-small .post-meta {
        position: absolute;
        height: 300px;
        width: calc(50% - 10px);
        padding: 133px 20px 0 20px!important;
        background-color: rgba(0,0,0,.3);
        color: #fff!important;
        transition: all .3s
    }

    #post-panel .panel:hover .post-meta,#post-panel .panel-small:hover .post-meta {
        background-color: rgba(0,0,0,.6)
    }

    #post-panel .panel:hover .post-meta>p,#post-panel .panel:hover .post-meta>div,#post-panel .panel-small:hover .post-meta>p,#post-panel .panel-small:hover .post-meta>div {
        opacity: 1;
        transform: translateY(0)
    }

    #post-panel .panel:hover .post-meta,#post-panel .panel-small:hover .post-meta {
        padding-top: 80px!important
    }

    #post-panel .ahover {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0
    }

    .blog-post>.panel:hover .index-post-img,.blog-post>.panel-small:hover .index-post-img-small {
        filter: blur(3px)
    }
}
/*首页头像悬停转动*/
.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
}
/*首页文章图片获取焦点放大*/
.item-thumb{
    cursor: pointer;  
    transition: all 0.6s;  
}

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

.item-thumb-small{
    cursor: pointer;  
    transition: all 0.6s;
}

.item-thumb-small:hover{
    transform: scale(1.06);
}

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

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

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

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

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


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

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

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

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

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

/*盒子模式四周阴影*/
.app.container {
    box-shadow: 0 0 30px rgba(51, 255, 255, 0.35);
}
#comments {
    padding: 4%!important;
}
/*图片居中,后面几行是为了把表情弄正常了,不然表情也独占一行了*/
img{
   display: table-cell;
}
.emotion-twemoji,.emotion-funny,.emotion-aru{
display: inline;
}

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

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

    to {
        transform: scale(1.1);
    }
}

也可以写成一个css文件,然后调用,这种方法也挺好的。反正不推荐直接改原文件。

本文作者:博主:     文章标题:我的网站的css设置
本文地址:https://www.xujilong.cn/archives/themmod.html     
版权说明:若无注明,本文皆为“小物有理”原创,转载请保留文章出处。
最后修改:2019 年 11 月 02 日 11 : 44 PM
如果觉得我的文章对你有用,请随意赞赏

发表评论

8 条评论

  1. 血小板自动机 Google Chrome 77.0.3865.120 Windows 10

    dalao,文章的标题在图片中央的效果是怎么实现的呢?是主题自带还是自己魔改的呢?

    1. 一只小物块 Safari 605.1.15 Mac OS X 10.15
      @血小板自动机

      自己魔改的

  2. tom Firefox 69.0 Windows 10

    公告下面的名字和一句话是怎么固定在左上角的,加入css之后就到中间了,怎么调的呀

    1. 一只小物块 Safari 605.1.15 Mac OS X 10.15
      @tom

      和我一样的css的话应该不会有问题吧,你F12看一下,等我回去检查一下告诉你,我有点忘记怎么改的了。

  3. 台灯教室 QQ浏览器 10.4.3469.400 Windows 10

    您好,刚刚入手handsome主题,想咨询您一下,配色方案您选择的第几个,你的挺好看的。

    1. 一只小物块 Safari 605.1.15 Mac OS X 10.15
      @台灯教室

      第10个。。。。。

      1. 台灯教室 Internet Explorer 11.0 Windows 7
        @一只小物块
        该评论仅登录用户及评论双方可见
        1. 一只小物块 Google Chrome 78.0.3904.70 Windows 10
          @台灯教室
          该评论仅登录用户及评论双方可见