• 搜索
  • 夜间模式
    ©2026  王较瘦?【Since 2006】 Theme by OneBlog
    搜索
    标签
    # 生活碎片/灵感时刻 # 瞎折腾/主题制作 # 生活碎片/摄影生活 # 生活碎片/游山玩水 # 贵阳市 # 生活碎片/游戏 # 重庆市 # 三亚 # 成都市 # 崇左市
  • 首页>
  • 日志>
  • 正文
  • 又一次博客优化记录

    2024年09月22日 31 阅读 0 评论 2471 字

    不知道干什么我就折腾博客,首页的欢迎页面一直是用的图片,正好看到一个还不错的视频,于是拿来当动态欢迎图,效果还不错,写在主题设置里的,谁让typecho切换主题会清空设置呢,因老王非专业选手,过几天就忘了,故而代码放这里备忘下?。
    找了蛮多视频结果选择困难症犯了?……,顺带在别处扣了个背景上飘浮的星星特效。
    01|背景图改为视频

    {collapse}
    {collapse-item label="div 部分" open}

    <video id="cat_index_topvideo" autoplay="" loop="" muted="" style="min-height: 100%;height: 100%;width: 100%;object-fit: cover;border-radius: .5rem;"> <source src="https://o.oxoo.cc/usr/themes/web/style/bg/welcome_1.mp4" type="video/mp4"> </video>

    {/collapse-item}
    {/collapse}

    02|背景添加星星效果

    {collapse}
    {collapse-item label="style.css 添加" open}

    #star-sky-banner {display: block;position: fixed;margin: 0;padding: 0;border: 0;outline: 0;left: 0;top: 0;width: 100%;height: 100%;pointer-events: none;z-index: 1;}

    {/collapse-item}
    {collapse-item label="footer.php添加"}

    <canvas id="star-sky-banner" style="width: 100%;height: 100%;"></canvas>
    <script src="<?php $this->options->themeUrl('style/dark.js'); ?>" type="text/javascript"></script>

    {/collapse-item}
    {/collapse}

    03|左侧添加浮动菜单
    {collapse}
    {collapse-item label="style.css 添加" open}

    <style>.group {
       position: fixed;
       height: 100%;
       display: flex;
       justify-content: center;
       flex-direction: column;
       margin-top: -30px;
    }
    .group div {
       position: relative;
       left: calc(-100% + 7px);
       padding: 12px 10px 12px 0;
       background: rgba(255, 255, 255, .7);
       margin: 3px 0;
       transition: .5s;
    }
    .group div:nth-child(1) {
       background: #5c7ea8;
    }
    .group div:nth-child(2) {
       background: #667a57;
    }
    .group div:nth-child(3) {
       background: #a5a046;
    }
    .group div:hover {
       left: 0;
       border-radius: 0 5px 5px 0
    }
    .group div a {
       display: flex;
       color: #fff;
       line-height: 25px;
    }
    .group div a>* {
       display: inline-block;
       height: 25px;
       margin: 0 3px;
    }
    .group div a>img {
       height: 25px;
       width: 25px;
       border-radius: 50%;
    }
    </style>

    {/collapse-item}
    {collapse-item label="footer.php添加"}

    <div class="group">
       <div>
           <a href="https://o.oxoo.cc/about.html" class="nopjax">
               <span>
                   <i class="fa fa-address-card"></i> 关于
               </span>
           </a>
       </div>
       <div>
           <a href="https://o.oxoo.cc/gbook.html" class="nopjax">
               <span>
                   <i class="fa fa-comments"></i> 留言
               </span>
           </a>
       </div>
       <div>
           <a href="https://o.oxoo.cc/links.html" class="nopjax">
               <span>
                   <i class="fa fa-rss"></i> 收藏
               </span>
           </a>
       </div>
    </div>

    {/collapse-item}
    {/collapse}

    本文著作权归作者 [ 王叔书 ] 享有,未经作者书面授权,禁止转载,封面图片来源于 [ 互联网 ] ,本文仅供个人学习、研究和欣赏使用。如有异议,请联系博主及时处理。
    瞎折腾/主题制作
    — END —
    Copyright©2026  All Rights Reserved.  Load:0.012 s
    Theme by OneBlog V3.6.4
    夜间模式

    开源不易,请尊重作者版权,保留基本的版权信息。