社区首页 >专栏 >本博客之Typecho Handsome主题美化记录

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

幻影网络

发布于 2022-11-08 08:07:42

41700

代码可运行

文章被收录于专栏：幻影网络科技幻影网络科技

运行总次数：0

代码可运行

文章中嵌入网页

&lt;iframe align=&quot;center&quot; width=&quot;100%&quot; height=&quot;740px&quot; src=&quot;&#x94FE;&#x63A5;&#x5730;&#x5740;&quot;  frameborder=&quot;no&quot; border=&quot;0&quot;  scrolling=&quot;no&quot; marginwidth=&quot;0&quot; marginheight=&quot;0&quot; &gt;&lt;/iframe&gt;

时光机栏目增添额外内容

&#x4F7F;&#x7528;&#x65B9;&#x6CD5;
    &#x5C06;&#x4EE5;&#x4E0B;&#x4EE3;&#x7801;&#x6309;&#x7167;&#x9700;&#x6C42;&#x81EA;&#x884C;&#x4FEE;&#x6539;&#x540E;&#x653E;&#x5230;&#x4E3B;&#x9898;&#x540E;&#x53F0;-&#x65F6;&#x5149;&#x673A;&#x914D;&#x7F6E;-RSS&#x52A8;&#x6001;&#x5185;&#x5BB9;&#x914D;&#x7F6E;&#x5185;&#x5373;&#x53EF;
    
{&quot;id&quot;:&quot;iciba&quot;,&quot;name&quot;:&quot;&#x6BCF;&#x65E5;&#x4E00;&#x53E5;&quot;,&quot;url&quot;:&quot;https://proxy.attainment.cn/https://rss.attainment.cn/iciba/7/poster&quot;},
{&quot;id&quot;:&quot;oschina&quot;,&quot;name&quot;:&quot;&#x5F00;&#x6E90;&#x4E2D;&#x56FD;&quot;,&quot;url&quot;:&quot;https://proxy.attainment.cn/https://rss.attainment.cn/oschina/news&quot;},
{&quot;id&quot;:&quot;bing&quot;,&quot;name&quot;:&quot;Bing &#x58C1;&#x7EB8;&quot;,&quot;url&quot;:&quot;https://proxy.attainment.cn/https://rss.attainment.cn/bing&quot;},
{&quot;id&quot;:&quot;sspai&quot;,&quot;name&quot;:&quot;&#x5C11;&#x6570;&#x6D3E;&quot;,&quot;url&quot;:&quot;https://proxy.attainment.cn/https://sspai.com/feed&quot;},
{&quot;id&quot;:&quot;DailyArt&quot;,&quot;name&quot;:&quot;&#x6BCF;&#x65E5;&#x827A;&#x672F;&quot;,&quot;url&quot;:&quot;https://proxy.attainment.cn/https://rss.attainment.cn/dailyart/zh&quot;}

美化记录

自定义CSS

文章标题居中

/*&#x6587;&#x7AE0;&#x6807;&#x9898;&#x5C45;&#x4E2D;*/
      header.bg-light.lter.wrapper-md {
      text-align: center;
    }

首页标题文字居中

 /*&#x9996;&#x9875;&#x6807;&#x9898;&#x6587;&#x5B57;&#x5C45;&#x4E2D;*/
    .m-t-none.text-ellipsis.index-post-title.text-title
    {
      text-align:center !important;
    }

左上角博客LOGO/博客名称的扫光效果

 /* logo&#x626B;&#x5149; */
    .navbar-brand{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.navbar-brand:before{content:&quot;&quot;; 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后面括号里的网址就是羽毛动画的网址，你也可以把它保存下来放到自己网站的根目录的某个位置内，然后将网址改为自己的博客，防止该效果失效（也就是做了个备份的意思，当然如果你嫌麻烦也可以不做）

/* &#x7FBD;&#x6BDB;_css */
    .dropdown.wrapper {
    background:url(https://&#x60A8;&#x7684;&#x535A;&#x5BA2;&#x7F51;&#x5740;/yumao.webp) right bottom no-repeat;
    }