Docker部署美化SunPanel导航页-CSDN博客

在这里插入图片描述
使用Cloudflare Tunnels穿透的地址：星霜导航
由于是使用的iStore里面的SunPanel导航页，只是基本的功能页脚配置

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面标题</title>
  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 20h7a1 1 0 0 0 1-1v-7.586a1 1 0 0 0-.293-.707l-7-7a1 1 0 0 0-1.414 0l-7 7a1 1 0 0 0-.293.707V19a1 1 0 0 0 1 1zm0 0v-2.5m0 2.5l-3-3m3 .5v-7m0 7l2.5-2.5M12 10.5a1.5 1.5 0 1 0 0-3a1.5 1.5 0 0 0 0 3m5.5 3a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0m-8 2a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0'/%3E%3C/svg%3E" type="image/svg+xml">
  <style>
  /* 背景线条样式 */
  .w-full .font-semibold:before {
     
     
    position: absolute;
    width: 93px;
    height: 75px;
    content: "";
    border-radius: 50%;
    z-index: -1;
    right: -27px;
    top: -35px;
    background: #ffffff3b;
    box-shadow: -8px 21px 0 #ffffff1a;
  }

  .w-full .font-semibold:after {
     
     
    position: absolute;
    width: 40px;
    height: 40px;
    border: 4px solid #ffffff3b;
    content: "";
    border-radius: 50%;
    top: -19px;
    right: 48px;
    z-index: -1;
  }

  /* 图标信息框样式 */
  .icon-info-box .rounded-2xl {
     
     
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  /* 背景渐变动画 */
  @keyframes hueRotate {
     
     
    100% {
     
     
      filter