Hey! Hello.

196说说 624文章 32相册 4987留言

收藏 归档 足迹

王较瘦的个人主页 运行6273天 Unsocial

签名:点滴记录 见证历程 朴素的文字 浓厚的情感
所在地:贵州·贵阳
一小时前 上线 已实名备案
格言:花有重开日,人无再少年,愿自己内心依然少年,永保一颗少年的心,心存善愿和远方。

又一次博客优化记录 2024/09/22 王叔书 0 0

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

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

<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 添加"}

#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 添加"}

<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}

暂无留言

留言