前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >本博客之Typecho Handsome主题美化记录

本博客之Typecho Handsome主题美化记录

作者头像
幻影网络
发布2022-11-08 16:07:42
3740
发布2022-11-08 16:07:42
举报
文章被收录于专栏:幻影网络科技
文章中嵌入网页

代码语言:javascript
复制
<iframe align="center" width="100%" height="740px" src="链接地址"  frameborder="no" border="0"  scrolling="no" marginwidth="0" marginheight="0" ></iframe>
时光机栏目增添额外内容
代码语言:javascript
复制
使用方法
    将以下代码按照需求自行修改后放到主题后台-时光机配置-RSS动态内容配置内即可
    
{"id":"iciba","name":"每日一句","url":"https://proxy.attainment.cn/https://rss.attainment.cn/iciba/7/poster"},
{"id":"oschina","name":"开源中国","url":"https://proxy.attainment.cn/https://rss.attainment.cn/oschina/news"},
{"id":"bing","name":"Bing 壁纸","url":"https://proxy.attainment.cn/https://rss.attainment.cn/bing"},
{"id":"sspai","name":"少数派","url":"https://proxy.attainment.cn/https://sspai.com/feed"},
{"id":"DailyArt","name":"每日艺术","url":"https://proxy.attainment.cn/https://rss.attainment.cn/dailyart/zh"}

美化记录

自定义CSS

文章标题居中
代码语言:javascript
复制
/*文章标题居中*/
      header.bg-light.lter.wrapper-md {
      text-align: center;
    }
首页标题文字居中
代码语言:javascript
复制
 /*首页标题文字居中*/
    .m-t-none.text-ellipsis.index-post-title.text-title
    {
      text-align:center !important;
    }
左上角博客LOGO/博客名称的扫光效果
代码语言:javascript
复制
 /* logo扫光 */
    .navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}
左上角博主信息羽毛背景

background:url后面括号里的网址就是羽毛动画的网址,你也可以把它保存下来放到自己网站的根目录的某个位置内,然后将网址改为自己的博客,防止该效果失效(也就是做了个备份的意思,当然如果你嫌麻烦也可以不做)

代码语言:javascript
复制
/* 羽毛_css */
    .dropdown.wrapper {
    background:url(https://您的博客网址/yumao.webp) right bottom no-repeat;
    }
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 美化记录
  • 自定义CSS
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档