寒光博客

Handsome美化 半透明化及一些效果
说明 由于博主已经习惯半透明风格，所以觉得对当前这块Handsome模板下手了 有的同学可能也喜欢这样的样式 所...
扫描右侧二维码阅读全文
19
2019/07

Handsome美化 半透明化及一些效果

  1.  Home
  2. Text  
    3. Share to：

说明

由于博主已经习惯半透明风格，所以觉得对当前这块Handsome模板下手了
有的同学可能也喜欢这样的样式 所以我就把代码整理出来~ 同时也留给自己做备份
是一个细节一个细节调的哦~
转载记得 注明来源
同时本站对该模板的样式一有新的修改 我也会更新这篇记录.并码上备注
谢谢！！

更新

2019年7月20日 09:32:53
github单页 颜色覆盖
2019年7月21日 12:40:38
注意 我用的配色是第四种
png蒙版更新
2019年7月22日 12:08:43
头像转动 放大删除 边线调细
所有的评论区头像hover旋转
2019年7月23日 18:15:16
评论区的css bug

请多多指教啦~！

先看看博主以前的博客前端样式(可能访问不辽)
http://iitboy.gz01.bdysite.com/wp
http://iitboy.gz01.bdysite.com/emlog
emlog 寒光唯美式 GitHub已开源
emlog Seamo模板 现在也在发售
Wp 高三毕业搭建
是不是很好看呢哈哈哈，反正我自己认为好看就是了。
废话不多说 开上代码

代码

PNG蒙版遮罩

就是 有一种瓦楞的感觉... 把代码插入的body下即可
记得图片自己保存一下 防止连接失效

png蒙版 

<div class="bg-image-pattern" style="
    background: rgba(255, 255, 255, 0.05) url(https://dxoca.cn/usr/uploads/2019/07/152024068.png) repeat scroll 0 0;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: -998;
"></div>

半透明

其中评论框的css是内嵌的所有只能手动修改文件 使其透明

此处内容需要评论回复后（审核通过）方可阅读。

继续接上面 这一串是 解决评论部分无透明底色
弄完之后内部评论框的css 半透明要手动去php文件(handsome/component/comment.php) 推荐0 .9 -> 0.5 修改~
如果解决不了的话 可以联系我帮你哦！~
评论修复 

.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;
}
.wrapper-md>#comments {
    border: solid 1px #fff;
    padding: 10px 30px 20px 30px;
}

其他

一些细节的处理

美化 

/**评论打卡**/

.OwO.OwO-open .OwO-body {
    display:table
}
/*首页文章图片获取焦点放大*/
.item-thumb{
    cursor: pointer;  
    transition: all 0.6s;  
}

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

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

.item-thumb-small:hover{
    transform: scale(1.03);
}
/*首页头像自动旋转*/

.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; 
}
.thumb-sm , .thumb-lg{
        -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;
        }

        .thumb-sm:hover , .thumb-lg: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:3px;
    animation:avatar .5s
}
/*文章阴影*/
/*panel阴影*/
.panel{
   box-shadow: 1px 1px 5px 5px rgba(203, 203, 203, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(203, 203, 203, 0.35);
}

.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(247, 204, 222, 0.20);
    -moz-box-shadow: 1px 1px 5px 5px rgba(247, 204, 222, 0.20);
}

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

.panel-small:hover{
    box-shadow: 1px 1px 5px 5px rgba(247, 204, 222, 0.20);
    -moz-box-shadow: 1px 1px 5px 5px rgba(247, 204, 222, 0.20);
}
.app.container {
    box-shadow: 0 0 30px rgba(255, 112, 173, 0.35);
}
/*标签背景色*/
.badge {
    background-color: #8db3bd;
}
/*气泡颜色*/
.tooltip-inner {
    background-color: #fd6ccdeb;
}/*选中文字*/
::selection {
    background: #7d36a8b0;
    color: #fff;
    text-shadow: none;
}

正文到此结束
本文作者：Author：     文章标题：Handsome美化 半透明化及一些效果
本文地址：https://dxoca.cn/front/57.html       百度未收录
版权说明：若无注明，本文皆为“Dxoca's blog （寒光博客）”原创，转载请保留文章出处。
Last modification：August 11th, 2019 at 06:10 pm
© The copyright belongs to the author
如果觉得我的文章对你有用，请随意赞赏

Leave a Comment

27 comments

  1. 偏锋博客 Safari 604.1 iPhone 中国 云南 大理白族自治州

    滴！访客卡！请上车的乘客系好安全带，现在是：Wed Aug 21 2019 18:40:20 GMT+0800 (CST)
    Reply
  2. 偏锋博客 Firefox 68.0 Windows 10 中国 云南 大理白族自治州

    学习
    Reply
  3. 雨 Google Chrome 75.0.3770.142 Windows 7 中国 江苏 连云港

    学习
    Reply
  4. 九日 小米 10.8.3 Android 9 中国 广东

    不知道手机端能不能半透明呢，现在的设置好像手机端依旧是白底，但背景图是在的⌇●﹏●⌇
    Reply
    1. Dxoca Google Chrome 74.0.3724.8 Windows 10 中国 青海 西宁
      @九日

      对对，，我还没 抽时间 看看，， 我弄好了 告诉你
      Reply
  5. 九七 Google Chrome 75.0.3770.142 Windows 10 中国 辽宁 盘锦

    这个怎么修改大佬 ， 小白一个，搞不懂。

    Reply
    1. Dxoca Google Chrome 74.0.3724.8 Windows 10 中国 青海 黄南藏族自治州
      @九七

      css 加到头部就好了

      Reply
      1. 九七 Google Chrome 75.0.3770.142 Windows 10 中国 辽宁 盘锦
        @Dxoca

        还是搞不懂，哈哈

        Reply
        1. Dxoca Google Chrome 74.0.3724.8 Windows 10 中国 青海 黄南藏族自治州
          @九七

          要我帮你么， qq联系|´・ω・)ノ
          Reply
          1. 九七 QQ 8.0.8.4115 Android 9 中国 辽宁 盘锦
            @Dxoca

            可以嘛大佬 qq786232811
            Reply
  6. 灵 Opera 12.14 Windows Vista 中国 山西 阳泉

    然后突然发现Lighthouse评分降低。。。
    Reply
    1. Dxoca Google Chrome 74.0.3724.8 Windows 10 中国 青海 黄南藏族自治州
      @灵

      因为 css，，直接嵌入 并且冗余了
      Reply
  7. 森七 Google Chrome 74.0.3729.131 Windows 10 中国 四川 成都

    要开始魔改了嘛|´・ω・)ノ
    Reply
    1. Dxoca Google Chrome 74.0.3724.8 Windows 10 中国 青海 黄南藏族自治州
      @森七

      不鸭， 只是稍加美化啦~
      Reply
  8. 门寒子 Firefox 68.0 Windows 10 中国 福建 莆田

    瞻仰大佬~~学习了

    Reply
    1. Dxoca Google Chrome 74.0.3724.8 Windows 10 中国 青海 海南藏族自治州
      @门寒子

      |´・ω・)ノ商业互学
      Reply
  9. 九日 Google Chrome 75.0.3770.100 Windows 7 中国 广东 梅州

    我来留个脚印，顺便看看半透明~|´・ω・)ノ
    Reply
    1. Dxoca Google Chrome 74.0.3724.8 Windows 10 中国 青海 海南藏族自治州
      @九日

      哈哈 好嘞~
      Reply
  10. 蓝鲸 QQ 8.0.8.4115 Android 9 中国 山东 滨州

    不错哦，学习学习(☆ω☆)
    Reply
    1. Dxoca Google Chrome 74.0.3724.8 Windows 10 中国 青海 海南藏族自治州
      @蓝鲸

      谢谢支教鸭~|´・ω・)ノ
      Reply
  11. 落叶无痕 QQ浏览器 10.4.3587.400 Windows 10 中国 河南 郑州

    来学习OωO
    Reply
    1. Dxoca Google Chrome 74.0.3724.8 Windows 10 中国 青海 海南藏族自治州
      @落叶无痕

      欢迎来小站哦~ヾ(≧∇≦*)ゝ
      Reply
  12. 小康博客 Google Chrome 75.0.3770.100 Windows 10 中国 河北 保定

    学习了！！

    Reply
    1. Dxoca Google Chrome 74.0.3724.8 Windows 10 中国 青海 黄南藏族自治州
      @小康博客

      刚刚 把 评论底色缺失 修复了一下
      Reply
    2. Dxoca Google Chrome 74.0.3724.8 Windows 10 中国 青海 黄南藏族自治州
      @小康博客

      但是还没完全弄完呢，，还有点问题~， 客气辽
      Reply
  13. 小康博客 Google Chrome 75.0.3770.100 Windows 10 中国 河北 保定

    大佬 学习了 ！！

    Reply
    1. Dxoca Google Chrome 74.0.3724.8 Windows 10 中国 青海 海南藏族自治州
      @小康博客

      我，，是萌新 ٩(ˊᗜˋ*)و
      Reply