Yoo趣儿

Yoo趣儿 › Geek › 站长 › 地址发布单页源码（全网最好看）

地址发布单页源码（全网最好看）

查看 30|回复 2
作者：人皇   
说明
  • 自定检测是否能够正常访问
  • 自动黑夜/白天模式，也可手动切换
  • 主要是页面好看
  • 原文链接：https://6ke.li



    fe41e75f0a05c96c97ea75f325846ac8.png (324.25 KB, 下载次数: 0)
    下载附件
    保存到相册
    2小时前 上传



    dd33acc80838210e6eecee70503d8b73.png (339.25 KB, 下载次数: 0)
    下载附件
    保存到相册
    2小时前 上传

    [ol]
  •    
  •    
  •     6ke论坛-地址发布页，收藏我回家不迷路！
  •    
  •    
  •    
  •         @font-face {
  •             font-family: 'HarmonyOS Sans SC';
  •             src: url('/diy/ziti/HarmonyOS_Sans_SC_Regular.woff2') format('woff2');
  •             font-weight: normal;
  •             font-style: normal;
  •         }
  •         :root {
  •             --primary-color: #3b82f6;
  •             --secondary-color: #60a5fa;
  •             --text-color: #1f2937;
  •             --card-background: rgba(255, 255, 255, 0.9);
  •             --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  •             --background-light: linear-gradient(-45deg, #e6f2ff, #fff0f5, #f0f7ff, #fff5e6);
  •             --background-dark: linear-gradient(-45deg, #1a202c, #2d3748, #4a5568, #2d3748);
  •         }
  •         .dark-mode {
  •             --primary-color: #60a5fa;
  •             --secondary-color: #3b82f6;
  •             --text-color: #e2e8f0;
  •             --card-background: rgba(26, 32, 44, 0.9);
  •         }
  •         * {
  •             box-sizing: border-box;
  •             margin: 0;
  •             padding: 0;
  •         }
  •         body {
  •             font-family: 'HarmonyOS Sans SC', sans-serif;
  •             color: var(--text-color);
  •             line-height: 1.6;
  •             min-height: 100vh;
  •             display: flex;
  •             justify-content: center;
  •             align-items: center;
  •             background: var(--background-light);
  •             background-size: 400% 400%;
  •             animation: gradientBG 15s ease infinite;
  •             overflow-x: hidden;
  •             font-size: 16px;
  •             transition: var(--transition);
  •         }
  •         body.dark-mode {
  •             background: var(--background-dark);
  •         }
  •         @keyframes gradientBG {
  •             0% { background-position: 0% 50%; }
  •             50% { background-position: 100% 50%; }
  •             100% { background-position: 0% 50%; }
  •         }
  •         .wrapper {
  •             padding: 2rem;
  •             width: 100%;
  •             max-width: 600px;
  •             position: relative;
  •         }
  •         .main {
  •             background-color: var(--card-background);
  •             border-radius: 20px;
  •             box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  •             padding: 2.5rem;
  •             backdrop-filter: blur(10px);
  •             transition: var(--transition);
  •         }
  •         .main:hover {
  •             box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  •         }
  •         h1 {
  •             font-size: 2.5rem;
  •             color: var(--primary-color);
  •             text-align: center;
  •             margin-bottom: 1.5rem;
  •             font-weight: 700;
  •         }
  •         ul {
  •             list-style-type: none;
  •             margin-bottom: 1.5rem;
  •         }
  •         li {
  •             margin-bottom: 1rem;
  •             padding: 1rem;
  •             background-color: rgba(248, 250, 252, 0.8);
  •             border-radius: 10px;
  •             transition: var(--transition);
  •             cursor: pointer;
  •             position: relative;
  •             padding-top: 1.5rem;
  •         }
  •         .dark-mode li {
  •             background-color: rgba(26, 32, 44, 0.8);
  •         }
  •         li:hover {
  •             transform: translateY(-3px);
  •             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  •         }
  •         li a {
  •             color: var(--primary-color);
  •             text-decoration: none;
  •             font-weight: bold;
  •             transition: var(--transition);
  •             display: flex;
  •             align-items: center;
  •         }
  •         li a:hover {
  •             color: var(--secondary-color);
  •         }
  •         li a i {
  •             margin-right: 0.5rem;
  •             font-size: 1.2em;
  •         }
  •         .notice {
  •             background-color: rgba(230, 242, 255, 0.8);
  •             border-left: 4px solid var(--primary-color);
  •             padding: 1rem;
  •             margin-top: 1rem;
  •             border-radius: 10px;
  •             transition: var(--transition);
  •         }
  •         .dark-mode .notice {
  •             background-color: rgba(44, 55, 72, 0.8);
  •         }
  •         .notice:hover {
  •             background-color: rgba(230, 242, 255, 1);
  •         }
  •         .dark-mode .notice:hover {
  •             background-color: rgba(44, 55, 72, 1);
  •         }
  •         .footer {
  •             margin-top: 2rem;
  •             text-align: center;
  •             color: var(--text-color);
  •             font-weight: 300;
  •             opacity: 0.8;
  •             transition: var(--transition);
  •         }
  •         .footer:hover {
  •             opacity: 1;
  •         }
  •         .bookmark-btn {
  •             display: block;
  •             width: 100%;
  •             padding: 1rem;
  •             background-color: var(--primary-color);
  •             color: white;
  •             text-align: center;
  •             border: none;
  •             border-radius: 10px;
  •             font-size: 1rem;
  •             font-weight: 600;
  •             cursor: pointer;
  •             transition: var(--transition);
  •             margin-bottom: 1.5rem;
  •             position: relative;
  •             overflow: hidden;
  •         }
  •         .bookmark-btn:hover {
  •             background-color: var(--secondary-color);
  •             transform: translateY(-2px);
  •             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  •         }
  •         .bookmark-btn::after {
  •             content: '';
  •             position: absolute;
  •             top: 50%;
  •             left: 50%;
  •             width: 5px;
  •             height: 5px;
  •             background: rgba(255, 255, 255, 0.5);
  •             opacity: 0;
  •             border-radius: 100%;
  •             transform: scale(1, 1) translate(-50%);
  •             transform-origin: 50% 50%;
  •         }
  •         .bookmark-btn:focus:not(:active)::after {
  •             animation: ripple 1s ease-out;
  •         }
  •         @keyframes ripple {
  •             0% { transform: scale(0, 0); opacity: 1; }
  •             20% { transform: scale(25, 25); opacity: 1; }
  •             100% { opacity: 0; transform: scale(40, 40); }
  •         }
  •         .bg-animation {
  •             position: fixed;
  •             top: 0;
  •             left: 0;
  •             width: 100%;
  •             height: 100%;
  •             z-index: -1;
  •         }
  •         .bg-animation span {
  •             position: absolute;
  •             display: block;
  •             width: 20px;
  •             height: 20px;
  •             background: rgba(255, 255, 255, 0.2);
  •             animation: move 25s infinite linear;
  •         }
  •         .dark-mode .bg-animation span {
  •             background: rgba(255, 255, 255, 0.1);
  •         }
  •         .bg-animation span:nth-child(1) { top: 20%; left: 20%; animation-duration: 15s; }
  •         .bg-animation span:nth-child(2) { top: 60%; left: 80%; animation-duration: 17s; width: 40px; height: 40px; }
  •         .bg-animation span:nth-child(3) { top: 40%; left: 40%; animation-duration: 19s; }
  •         .bg-animation span:nth-child(4) { top: 80%; left: 10%; animation-duration: 21s; }
  •         @keyframes move {
  •             0% { transform: translateX(0) translateY(0) rotate(0); opacity: 1; border-radius: 0; }
  •             100% { transform: translateX(-1000px) translateY(-1000px) rotate(720deg); opacity: 0; border-radius: 50%; }
  •         }
  •         @media (max-width: 768px) {
  •             body {
  •                 font-size: calc(14px + 0.390625vw);
  •             }
  •             .main {
  •                 padding: 2rem;
  •             }
  •             h1 {
  •                 font-size: 2rem;
  •             }
  •         }
  •         .ms-display {
  •             position: absolute;
  •             top: 0;
  •             left: 0;
  •             font-size: 0.7em;
  •             padding: 2px 5px;
  •             border-top-left-radius: 10px;
  •             border-bottom-right-radius: 10px;
  •             color: white;
  •             transition: background-color 0.3s ease;
  •         }
  •         .ms-checking {
  •             background-color: #ffeb3b;
  •             color: black;
  •         }
  •         .ms-normal {
  •             background-color: #4CAF50;
  •         }
  •         .ms-error {
  •             background-color: #f44336;
  •         }
  •         .status-badge {
  •             padding: 2px 6px;
  •             border-radius: 4px;
  •             font-size: 0.8em;
  •             margin-left: 10px;
  •             color: white;
  •         }
  •         .status-normal {
  •             background-color: #4CAF50;
  •         }
  •         .status-error {
  •             background-color: #f44336;
  •         }
  •         .status-checking {
  •             background-color: #ffeb3b;
  •             color: black;
  •         }
  •         li.disabled {
  •             opacity: 0.5;
  •             cursor: not-allowed;
  •         }
  •         li.disabled a {
  •             pointer-events: none;
  •         }
  •         .mode-toggle {
  •             position: absolute;
  •             top: 10px;
  •             right: 10px;
  •             background: none;
  •             border: none;
  •             color: var(--text-color);
  •             font-size: 1.5rem;
  •             cursor: pointer;
  •             transition: var(--transition);
  •             z-index: 10;
  •         }
  •         .mode-toggle:hover {
  •             color: var(--primary-color);
  •         }
  •         #stats-container {
  •             background-color: var(--card-background);
  •             border-radius: 10px;
  •             padding: 15px;
  •             margin-top: 20px;
  •             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  •             transition: var(--transition);
  •         }
  •         #stats-container:hover {
  •             box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
  •         }
  •         #last-checked-time {
  •             font-size: 1.2em;
  •             font-weight: bold;
  •             margin-bottom: 10px;
  •             color: var(--primary-color);
  •         }
  •         .stats-row {
  •             display: flex;
  •             justify-content: space-around;
  •             align-items: center;
  •             margin-top: 10px;
  •         }
  •         .stat-item {
  •             text-align: center;
  •         }
  •         .stat-value {
  •             font-size: 1.5em;
  •             font-weight: bold;
  •         }
  •         .stat-label {
  •             font-size: 0.9em;
  •             color: var(--text-color);
  •             opacity: 0.8;
  •         }
  •         .icon-clock, .icon-check, .icon-times {
  •             margin-right: 5px;
  •         }
  •         .icon-check {
  •             color: #4CAF50;
  •         }
  •         .icon-times {
  •             color: #f44336;
  •         }
  •         .url-content {
  •             display: flex;
  •             justify-content: space-between;
  •             align-items: center;
  •             width: 100%;
  •         }
  •         @media (max-width: 768px) {
  •         body {
  •             font-size: 14px;
  •         }
  •         .wrapper {
  •             padding: 1rem;
  •         }
  •         .main {
  •             padding: 1.5rem;
  •         }
  •         h1 {
  •             font-size: 1.5rem;
  •             margin-bottom: 1rem;
  •         }
  •         .bookmark-btn {
  •             padding: 0.75rem;
  •             font-size: 0.9rem;
  •             margin-bottom: 1rem;
  •         }
  •         li {
  •             padding: 0.75rem;
  •             margin-bottom: 0.5rem;
  •             padding-top: 1.25rem;
  •         }
  •         .url-content {
  •             flex-direction: column;
  •             align-items: flex-start;
  •         }
  •         .url-content span:first-child {
  •             font-size: 0.9rem;
  •             margin-bottom: 0.25rem;
  •         }
  •         li a {
  •             font-size: 0.8rem;
  •         }
  •         .status-badge {
  •             font-size: 0.7em;
  •             padding: 1px 4px;
  •             margin-left: 0;
  •             margin-top: 0.25rem;
  •         }
  •         .ms-display {
  •             font-size: 0.6em;
  •             padding: 1px 3px;
  •         }
  •         .notice {
  •             padding: 0.75rem;
  •             font-size: 0.8rem;
  •         }
  •         #stats-container {
  •             padding: 10px;
  •             margin-top: 15px;
  •         }
  •         #last-checked-time {
  •             font-size: 0.9em;
  •         }
  •         .stat-value {
  •             font-size: 1.2em;
  •         }
  •         .stat-label {
  •             font-size: 0.8em;
  •         }
  •         .footer {
  •             margin-top: 1.5rem;
  •             font-size: 0.8rem;
  •         }
  •         .mode-toggle {
  •             font-size: 1.2rem;
  •         }
  •     }
  •    
  •    
  •    
  •         
  •         
  •         
  •         
  •    
  •    
  •         
  •             
  •         
  •         
  •             6ke论坛-地址发布页
  •             
  •                 Ctrl+D 收藏本页到浏览器收藏夹
  •             
  •             
  •                
  •                     -ms
  •                     
  •                         6ke论坛（主）
  •                         
  •                             https://6.ke
  •                         
  •                         检测中...
  •                     
  •                
  •                
  •                     -ms
  •                     
  •                         6ke论坛（备）
  •                         
  •                             https://6ke.li
  •                         
  •                         检测中...
  •                     
  •                
  •                
  •                     -ms
  •                     
  •                         百度搜索
  •                         
  •                             https://baidu.com
  •                         
  •                         检测中...
  •                     
  •                     
  •                
  •                     -ms
  •                     
  •                         bing
  •                         
  •                             https://cn.bing.com
  •                         
  •                         检测中...
  •                     
  •                
  •             
  •             
  •                 部分中国网络屏蔽网址，打不开请挂梯子🪜访问！
  •             
  •             
  •         
  •         
  •             © 2024 6ke论坛. 保留所有权利。
  •         
  •    
  • [/ol]复制代码

    地址, 论坛

    • 相关帖子

    YY八卦网   
    确实好看 感谢分享
    脆弱   
    比较实用，感谢分享
    返回列表
    您需要登录后才可以回帖 登录 | 立即注册

    AD1

    热门主题

    热门板块

    问与答分享发现分享创造奇思妙想分享邀请码商业推广优惠信息PythonPHPJavaJavaScriptNode.jsGo语言C++HTML

    公告

    标签|小黑屋|Yoo趣儿

    GMT+8, 2024-10-6 20:28 , Processed in 0.009182 second(s), 4 queries , Gzip On, MemCached On.

    Powered by Discuz! X3.2

    The happiest thing in the world is to strive for an ideal.

    返回顶部