美化首页动态背景+毛玻璃搜索框+打字机效果

预览图

或移步本站PC端首页查看效果

功能一览

1. 动态视频banner
2. 毛玻璃质感MAC风极简搜索框（修复版，不会因为打字机上下跳动）
3. 自动分段式打字机效果副标题
4. 底部自定义卡片

教程开始

// 新首页图开始
add_action('wp_head', 'zibll_Add_ons_newindex');
function zibll_Add_ons_newindex() {
    if(is_home()){
    ?>
  <div id="page-wrapper">
    <div class="home-banner por">
        <section class="section" style="height: calc(100vh - 220px);max-height: 600px;">
                <div class="video-wrapper">
                    <video autoplay="" playsinline="" loop="" muted="" src="https://a.hacs.top/wp-content/uploads/2024/06/53ed6c199f161226-1.mp4">
                    </video>
                </div>
                <div class="video-overlay">
                </div>
            </section>
            <div class="wrapper  poa" style="top: 20%;">
            <div class="home-banner-content Onecad_clearfix">
                <div class="slogan-text por fl">
                    <p>HAC社区 无限进步<i class="iblock poa corner" style="background:url(//www.ytshopcn.com/img/hot.svg) no-repeat;"></i></p>
                     <div id="typewriter">
    <p class="current-text"></p>
</div>
            </div>
           <div class="search-input"><form method="get" class="padding-10 search-form" action="https://a.hacs.top/"><div class="line-form"><div class="search-input-text">
                <input type="text" name="s" class="line-form-input" tabindex="1" value=""><i class="line-form-line"></i>
                <div class="scale-placeholder" default="搜索您想要的应用">搜索您想要的应用</div>
                <div class="abs-right muted-color"><button type="submit" tabindex="2" class="null"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-search"></use></svg></button>
                </div>
            </div><input type="hidden" name="type" value="post"></div></form></div>
          </div>
                    </div>
                </div>
            </div>
        </div>
                <!-- 头部快速链接导航 -->
         
    </div>
</div>
<div id="home-row-qukuai" class="  home_row home_row_1  module-qukuai  " style="background-color:;"> 
   <div class="wrapper">
        <div class="home-row-left content-area "> 
            <div class="sort jitheme_radius" style="margin-top:-80px ;">    
                <ul class="sort-config"> 
                    <li>
                                            <div class="sort-config-item">
                                            <img class="sort-config-icon" src="//www.ytshopcn.com/img/提示.svg" >
                                            <a href="" target="_blank"><p class="sort-config-title">自定义
                                            
                                            </p> </a>
                                            <span class="sort-config-desc">自定义八个字左右</span>
                                            </div></li> <li>
                                            <div class="sort-config-item">
                                            <img class="sort-config-icon" src="//www.ytshopcn.com/img/文章.svg" >
                                            <a href="" target="_blank"><p class="sort-config-title">自定义
                                            
                                            </p> </a>
                                            <span class="sort-config-desc">自定义八个字左右</span>
                                            </div></li> <li>
                                            <div class="sort-config-item">
                                            <img class="sort-config-icon" src="//www.ytshopcn.com/img/图片.svg" >
                                            <a href="" target="_blank"><p class="sort-config-title">自定义
                                            
                                            </p> </a>
                                            <span class="sort-config-desc">自定义八个字左右</span>
                                            </div></li> <li>
                                            <div class="sort-config-item">
                                            <img class="sort-config-icon" src="//www.ytshopcn.com/img/安全.svg" >
                                            <a href="" target="_blank"><p class="sort-config-title">自定义
</p> </a>
                                            <span class="sort-config-desc">自定义八个字左右</span>
                                            </div></li> <li>
                                            <div class="sort-config-item">
                                            <img class="sort-config-icon" src="//www.ytshopcn.com/img/注意.svg" >
                                            <a href="" target="_blank"><p class="sort-config-title">自定义
                                            
                                            </p> </a>
                                            <span class="sort-config-desc">自定义八个字左右</span>
                                            </div></li>                 </ul> 
                                        </div>
        </div>
    </div>
</div>

将以上代码放到func.php

将以上CSS代码紧跟其后

最后将以上js代码放入后台自定义代码处

注意：务必检查代码，将网址/标题内容等修改成自己站点内容