寒光博客

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

寒光博客Handsome美化 半透明化及一些效果

说明


由于博主已经习惯半透明风格,所以觉得对当前这块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美化 半透明化及一些效果
本文地址:http://dxoca.cn/front/57.html       百度已收录
版权说明:若无注明,本文皆为“Dxoca's blog (寒光博客)”原创,转载请保留文章出处。
Last modification:July 17th, 2020 at 06:35 pm
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment

59 comments

  1. 冷曦 Google Chrome 49.0.2623.87 Windows 7 中国 浙江 嘉兴

    努力学习

  2. 花糖 Google Chrome 80.0.3987.163 Windows 10 中国 山东 烟台

    感谢分享~

    1. 寒光博客 Google Chrome 83.0.4103.116 Windows 10 中国 青海 西宁
      @花糖

      嘿嘿 谢谢支持

  3. 羽忆 Google Chrome 83.0.4103.97 Windows 10 中国 山东

    咳咳,再拿一遍代码

    1. 寒光博客 Google Chrome 81.0.4044.138 Windows 10 中国 青海 西宁
      @羽忆

      铐走!!ヾ(≧∇≦*)ゝ

  4. 羽忆 Google Chrome 77.0.3865.116 Android 10 中国 山东

    我要代码 emmmm

  5. zhao Google Chrome 81.0.4044.122 Windows 10 中国 广东 东莞

    谢谢~

    1. Dxoca Google Chrome 81.0.4044.138 Windows 10 中国 青海 西宁
      @zhao

      客气

  6. xcxf Edge 80.0.361.69 Windows 10 中国 江西 宜春

    膜拜大佬awa

    1. Dxoca Google Chrome 81.0.4044.138 Windows 10 中国 青海 西宁
      @xcxf

      客气 客气

  7. 小熊软糖 QQ浏览器 10.5.3991.400 Windows 10 中国 浙江 杭州

    小白表示...不会弄

    1. 寒光博客 Google Chrome 74.0.3724.8 Windows 10 中国 青海
      @小熊软糖

      qwq 那就补一下基础

  8. 小熊软糖 QQ浏览器 10.5.3991.400 Windows 10 中国 浙江 杭州

    膜拜大佬~OωO

  9. 小白 Google Chrome 69.0.3947.100 Windows 10 中国 山东 泰安

    想学习一下!!!

  10. 小熊 QQ浏览器 10.5.3863.400 Windows 10 中国 浙江 杭州

    想要大佬的全部插件qwq

    1. 寒光博客 Google Chrome 74.0.3724.8 Windows 10 中国 青海
      @小熊

      慢慢搞qwq

  11. 超走 QQ浏览器 10.5.3863.400 Windows 10 中国 湖北 咸宁

    评论一个

  12. 小白特别白 Google Chrome 75.0.3770.100 Windows 10 中国 浙江 衢州

    1494131712qq在这

  13. 小白特别白 Google Chrome 75.0.3770.100 Windows 10 中国 浙江 衢州

    博主能不能私聊我不会安装你的模板

    1. Dxoca Google Chrome 81.0.4044.138 Windows 10 中国 青海 西宁
      @小白特别白

      我不是模版的作者,,我只是美化了一下(/ω\)

  14. Dreamy.CHQ Google Chrome 79.0.3945.130 Windows 10 中国 江西 宜春

    膜拜大佬~OωO

  15. superz QQ浏览器 10.5.3863.400 Windows 7 中国 湖北 咸宁

    爱折腾,膜拜大虾

  16. 吃可爱多吗? Google Chrome 78.0.3904.108 Windows 10 中国 山东 烟台

    好看!

    1. Dxoca Google Chrome 81.0.4044.138 Windows 10 中国 青海 西宁
      @吃可爱多吗?

      嘿嘿 谢谢夸奖

  17. 哈哈 搜狗浏览器 .X Windows 10 中国 江苏 徐州

    看看ヾ(≧∇≦*)ゝ

  18. grss Google Chrome 76.0.3809.132 Windows 10 中国 四川 成都

    学习下

  19. Dreamy.CHQ Google Chrome 77.0.3865.90 Windows 10 中国 江西 宜春

    滴!访客卡!请上车的乘客系好安全带,现在是:Sun Oct 20 2019 20:27:23 GMT+0800 (中国标准时间)

  20. Rintarou° Google Chrome 77.0.3865.120 Windows 10 中国 广东 湛江

    滴!访客卡!请上车的乘客系好安全带,现在是:Sun Oct 13 2019 11:02:34 GMT+0800 (中国标准时间)

    1. 寒光博客 Google Chrome 74.0.3724.8 Windows 10 中国 湖北 武汉
      @Rintarou°

      你好哦~

  21. M&F Google Chrome 63.0.3239.132 Windows 10 中国 广西 南宁

    非常漂亮~

  22. cout357 Google Chrome 76.0.3809.132 Windows 10 中国 江西 九江

    好看

    1. Dxoca Google Chrome 74.0.3724.8 Windows 10 中国 湖北 武汉
      @cout357

      嘿嘿 谢谢夸奖~!

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

    滴!访客卡!请上车的乘客系好安全带,现在是:Wed Aug 21 2019 18:40:20 GMT+0800 (CST)

  24. 偏锋博客 Firefox 68.0 Windows 10 中国 云南 大理白族自治州

    学习

  25. Google Chrome 75.0.3770.142 Windows 7 中国 江苏 连云港

    学习

  26. 九日 小米 10.8.3 Android 9 中国 广东

    不知道手机端能不能半透明呢,现在的设置好像手机端依旧是白底,但背景图是在的⌇●﹏●⌇

    1. Dxoca Google Chrome 74.0.3724.8 Windows 10 中国 青海 西宁
      @九日

      对对,,我还没 抽时间 看看,, 我弄好了 告诉你

  27. 九七 Google Chrome 75.0.3770.142 Windows 10 中国 辽宁 盘锦

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

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

      css 加到头部就好了

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

        还是搞不懂,哈哈

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

          要我帮你么, qq联系|´・ω・)ノ

          1. 九七 QQ 8.0.8.4115 Android 9 中国 辽宁 盘锦
            @Dxoca

            可以嘛大佬 qq786232811

  28. Opera 12.14 Windows Vista 中国 山西 阳泉

    然后突然发现Lighthouse评分降低。。。

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

      因为 css,,直接嵌入 并且冗余了

  29. 森七 Google Chrome 74.0.3729.131 Windows 10 中国 四川 成都

    要开始魔改了嘛|´・ω・)ノ

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

      不鸭, 只是稍加美化啦~

  30. 门寒子 Firefox 68.0 Windows 10 中国 福建 莆田

    瞻仰大佬~~学习了

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

      |´・ω・)ノ商业互学

  31. 九日 Google Chrome 75.0.3770.100 Windows 7 中国 广东 梅州

    我来留个脚印,顺便看看半透明~|´・ω・)ノ

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

      哈哈 好嘞~

  32. 蓝鲸 QQ 8.0.8.4115 Android 9 中国 山东 滨州

    不错哦,学习学习(☆ω☆)

    1. Dxoca Google Chrome 74.0.3724.8 Windows 10 中国 青海 海南藏族自治州
      @蓝鲸

      谢谢支教鸭~|´・ω・)ノ

  33. 落叶无痕 QQ浏览器 10.4.3587.400 Windows 10 中国 河南 郑州

    来学习OωO

    1. Dxoca Google Chrome 74.0.3724.8 Windows 10 中国 青海 海南藏族自治州
      @落叶无痕

      欢迎来小站哦~ヾ(≧∇≦*)ゝ

  34. 小康博客 Google Chrome 75.0.3770.100 Windows 10 中国 河北 保定

    学习了!!

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

      刚刚 把 评论底色缺失 修复了一下

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

      但是还没完全弄完呢,,还有点问题~, 客气辽

  35. 小康博客 Google Chrome 75.0.3770.100 Windows 10 中国 河北 保定

    大佬 学习了 !!

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

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