• 注册
    • 查看作者
    • 导航页(自改)

      导航页(自改)

      原文地址: 链接

      在我博客打开体验更佳!

      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <link rel="icon" href="https://class.mgsy007.top/favicon.ico" type="image/x-icon">
          <link rel="shortcut icon" href="https://class.mgsy007.top/favicon.ico" type="image/x-icon">
          <title>导航页名称</title> 
          <style>
              *{
          margin: 0;
          padding: 0;
          font-family: "Open Sans ",sans-serif;
       
      }
      body{
          height: 100vh;
          display: flex;
          align-items: center; 
          justify-content: center;
          text-align: center;
          background-color: black;
          background-image: url("https://img.xjh.me/random_img.php?type=bg&ctype=nature&return=302"); 
          background-size: 1920px 1080px;
          background-repeat: no-repeat;
      } 
          #jinrishici-sentence {
              color:white
          }
      .btn{
          width: 160px;
          height: 60px;
          margin: 40px 0 ;
           background-image: linear-gradient(to right, #ff9569 0%, #e92758 100%);
          border:none;
          color: #fff;
          font-size: 16px;
          text-transform: uppercase;
          cursor: pointer; 
          border-radius: 160px 160px;
       
      }
      .box{
          width: 100px;
          height: 120px;
          background-position: center;
          background-size: 100px 80px;
          background-repeat: no-repeat;
          margin: 0 auto;
      }
      .btn:hover{
          background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
          animation: rubberBand 1.25s; 
      }
      @keyframes rubberBand{
          0%{
              transform: scale3d(1,1,1);
       
          }    
          35%{
              transform: scale3d(1.25,.75,1);
              
          }
          45%{
              transform: scale3d(.75,1,1);
              
          }
          60%{
              transform: scale3d(1.2,.8,1);
              
          }
          75%{
              transform: scale3d(1.05,.95,1);
              
          }
          100%{
              transform: scale3d(1,1,1);
          }
      }
       #svgBoxr{
              width:100%;
              margin:100px auto;
          }
          .text{
              font-size: 58px;
              font-weight: bold;
              text-transform: uppercase;
              fill: none;
              stroke-width: 2px;
              stroke-dasharray: 90 310;
              animation: stroke 6s infinite linear;
          }
          .text-1{
              stroke: #3498db;
              text-shadow: 0 0 5px #ff0000;
              animation-delay: -1.5s;
          }
          .text-2{
              stroke: #f39c12;
              text-shadow: 0 0 5px #ff0000;
              animation-delay: -3s;
          }
          .text-3{
              stroke: #e74c3c;
              text-shadow: 0 0 5px #e74c3c;
              animation-delay: -4.5s;
          }
          .text-4{
              stroke: #9b59b6;
              text-shadow: 0 0 5px #9b59b6;
              animation-delay: -6s;
          }
           
          @keyframes stroke {
              100% {
                  stroke-dashoffset: 400;
              }
          }
          .svgText{
              width:600px;
              margin:0 auto;
          }
          .svgText h3{
              font-size:18px;
              color:#333;
              line-height:2;
          }
          .svgText p{
              font-size:16px;
              color:#888;
              line-height:2;
          }
          .svgText p a,.svgText p a:hover{
              color:#01a6fc;
              font-weight:600;
          }
          .svgText ul li{
              font-size:16px;
              color:#888;
              line-height:2;
          }
          </style>
          <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/>
       
      </head>
      <body>
          <div>
                  <svg width="100%" height="100">
                      <text text-anchor="middle" x="50%" y="50%" class="text text-1">
                         导航
                      </text>
                      <text text-anchor="middle" x="50%" y="50%" class="text text-2">
                          导航
                      </text>
                      <text text-anchor="middle" x="50%" y="50%" class="text text-3">
                          导航
                      </text>
                      <text text-anchor="middle" x="50%" y="50%" class="text text-4">
                          导航
                      </text>
                      <text text-anchor="middle" x="50%" y="50%" class="text text-5">
                          导航
                      </text>
                  </svg>
       
                      <a href="http://">
                  <button type="button"  value="点我进入"><i class="fa fa-bolt" aria-hidden="true"></i>URL</button>
              </a>
              <a href="http://">
                  <button type="button" value="点我进入"><i class="fa fa-firefox" aria-hidden="true"></i>URL</button>
              </a>
                      <a href="http://">
                  <button type="button" value="点我进入"><i class="fa fa-eercast" aria-hidden="true"></i>URL</button>
              </a>
                              <a href="http://">
                  <button type="button" value="点我进入"><i class="fa fa-bolt" aria-hidden="true"></i><i class="fa fa-bolt" aria-hidden="true"></i>URL</button>
              </a>
              
                              <a href="http://">
                  <button type="button" value="点我进入"><i class="fa fa-bolt" aria-hidden="true"></i>URL</button>
              </a>
       
              <br>
              
         <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
            <span id="jinrishici-sentence" style="color: #AEDD81">诗人正在冥思苦想中。。。。</span><br>
              <span><a href="" style="color:#0CF;text-decrotion:none;">超链接</a></span>
              
          </div>
      </body>
      </html>

    • 2
    • 0
    • 0
    • 60
    • Yitzu猫狗鼠鱼

      请登录之后再进行评论

      登录
      • 财富排行榜
      • 等级排行榜
    • 十里清欢
      十里清欢
      一条有理想的咸鱼!
    • 小妖
      小妖
      普普通通的无名之辈
    • 依晨小哥
      依晨小哥
      自由干净
    • Cat
      Cat
      故梦待续 | 结局无期
    • Dream-认证官
      Dream-认证官
      他太懒了,什么都没有写
    • LuoJunJunJun
      LuoJunJunJun
      blog.jiangtian1217.cn
    • 乔治的小窝
      乔治的小窝
      他太懒了,什么都没有写
    • 猫狗鼠鱼
      猫狗鼠鱼
      ?博客:catdog007.icu ?b站up主:猫狗鼠鱼?
    • 村长-Dream
      村长-Dream
      一花一草一树木,一人一梦在追求。
    • Dream-活动官
      Dream-活动官
      他太懒了,什么都没有写
    • Cat
      Cat
      故梦待续 | 结局无期
    • 十里清欢
      十里清欢
      一条有理想的咸鱼!
    • 村长-Dream
      村长-Dream
      一花一草一树木,一人一梦在追求。
    • RJ
      RJ
      https://qrj.hk
    • 依晨小哥
      依晨小哥
      自由干净
    • Dream-认证官
    • 爱一世
      爱一世
      419598908
    • 小妖
      小妖
      普普通通的无名之辈
    • LuoJunJunJun
      LuoJunJunJun
      blog.jiangtian1217.cn
    • Dream-小编
    • 做任务
    • 实时动态
    • 偏好设置
    • 单栏布局 侧栏位置: