• 手机打开 第三方 “微信、快手、QQ、电话、信息” 等

    9a69fede8b2044a79dd834e3e48f20b4.png前期回顾

    Vue3 + TS + Element-Plus —— 项目系统中封装表格+搜索表单 十分钟写五个UI不在是问题_vue3 封装table 配置表格-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/m0_57904695/article/details/135538630?spm=1001.2014.3001.5501

    目录

    🤖 下载App如下图所示： 

    🛠️ 网页预览：

    🎉 所有源码（下载功能样式 + 打开引用） 

    我做了两个版本：一个是网页版预览，另一个是app应用，都可以直接下载 

    🤖 下载App如下图所示： 

    App打开其他手机应用 -Demo软件下载

    🛠️ 网页预览：

    新年快乐-打开应用 (webcats.cn)
     

    🎉 所有源码（下载功能样式 + 打开引用） 

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Chat4移动版下载-彩色之外title>
    8.     <style>
    9.         .main_back {
    10.             position: absolute;
    11.             border-radius: 10px;
    12.             transform: rotate(90deg);
    13.             width: 11em;
    14.             height: 11em;
    15.             background: linear-gradient(270deg, #03a9f4, #cc39a4, #ffb5d2);
    16.             z-index: -2;
    17.             box-shadow: inset 0px 0px 180px 5px #ffffff;
    18.         }
    19.  
    20.         .cantainer {
    21.             display: block;
    22.             margin: 50px 0 0 200px;
    23.             padding: 15px;
    24.             width: fit-content;
    25.             height: fit-content;
    26.         }
    27.  
    28.         .welcome {
    29.             /* 渐变字体 */
    30.             background: linear-gradient(270deg, #03a9f4, #cc39a4, #ffb5d2);
    31.             -webkit-background-clip: text;
    32.             -webkit-text-fill-color: transparent;
    33.             font-size: 2.5em;
    34.         }
    35.  
    36.         .info {
    37.             font-size: 14px;
    38.             color: #200505;
    39.         }
    40.  
    41.         .main {
    42.             margin: 200px auto;
    43.             display: flex;
    44.             flex-wrap: wrap;
    45.             width: 14em;
    46.             align-items: center;
    47.             justify-content: center;
    48.             z-index: -1;
    49.         }
    50.  
    51.         .card {
    52.             width: 60px;
    53.             height: 60px;
    54.             border-top-left-radius: 10px;
    55.             background: lightgrey;
    56.             transition: .4s ease-in-out, .2s background-color ease-in-out, .2s background-image ease-in-out;
    57.             background: rgba(255, 255, 255, 0.596);
    58.             backdrop-filter: blur(5px);
    59.             border: 1px solid transparent;
    60.             -webkit-backdrop-filter: blur(5px);
    61.             display: flex;
    62.             align-items: center;
    63.             justify-content: center;
    64.         }
    65.  
    66.         .card .instagram {
    67.             opacity: 0;
    68.             transition: .2s ease-in-out;
    69.             fill: #cc39a4;
    70.         }
    71.  
    72.         .card:nth-child(2) {
    73.             border-radius: 0px;
    74.         }
    75.  
    76.         .card:nth-child(2) .twitter {
    77.             opacity: 0;
    78.             transition: .2s ease-in-out;
    79.             fill: #03A9F4;
    80.         }
    81.  
    82.         .card:nth-child(3) {
    83.             border-top-right-radius: 10px;
    84.             border-top-left-radius: 0px;
    85.         }
    86.  
    87.         .card:nth-child(3) .dribble {
    88.             opacity: 0;
    89.             transition: .2s ease-in-out;
    90.             fill: #ffb5d2;
    91.         }
    92.  
    93.         .card:nth-child(4) {
    94.             border-radius: 0px;
    95.         }
    96.  
    97.         .card:nth-child(4) .codepen {
    98.             opacity: 0;
    99.             transition: .2s ease-in-out;
    100.             fill: black;
    101.         }
    102.  
    103.         .card:nth-child(5) {
    104.             border-radius: 0px;
    105.         }
    106.  
    107.         .card:nth-child(5) .uiverse {
    108.             position: absolute;
    109.             margin-left: 0.2em;
    110.             margin-top: 0.2em;
    111.             opacity: 0;
    112.             transition: .2s ease-in-out;
    113.         }
    114.  
    115.         .card:nth-child(6) {
    116.             border-radius: 0px;
    117.         }
    118.  
    119.         .card:nth-child(6) .discord {
    120.             opacity: 0;
    121.             transition: .2s ease-in-out;
    122.             fill: #8c9eff;
    123.         }
    124.  
    125.         .card:nth-child(7) {
    126.             border-bottom-left-radius: 10px;
    127.             border-top-left-radius: 0px;
    128.         }
    129.  
    130.         .card:nth-child(7) .github {
    131.             opacity: 0;
    132.             transition: .2s ease-in-out;
    133.             fill: black;
    134.         }
    135.  
    136.         .card:nth-child(8) {
    137.             border-radius: 0px;
    138.         }
    139.  
    140.         .card:nth-child(8) .telegram {
    141.             opacity: 0;
    142.             transition: .2s ease-in-out;
    143.             fill: #29b6f6;
    144.         }
    145.  
    146.         .card:nth-child(9) {
    147.             border-bottom-right-radius: 10px;
    148.             border-top-left-radius: 0px;
    149.         }
    150.  
    151.         .card:nth-child(9) .reddit {
    152.             opacity: 0;
    153.             transition: .2s ease-in-out;
    154.         }
    155.  
    156.         .main:hover {
    157.             width: 14em;
    158.             cursor: pointer;
    159.         }
    160.  
    161.         .main:hover .main_back {
    162.             opacity: 0;
    163.         }
    164.  
    165.         .main:hover .card {
    166.             margin: .2em;
    167.             border-radius: 10px;
    168.             box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    169.             border: 1px solid rgba(255, 255, 255, 0.3);
    170.             background: rgba(255, 255, 255, 0.2);
    171.         }
    172.  
    173.         .main:hover .card:nth-child(5) {
    174.             border: transparent;
    175.         }
    176.  
    177.         .main:hover .text {
    178.             opacity: 0;
    179.             z-index: -3;
    180.         }
    181.  
    182.         .main:hover .instagram {
    183.             opacity: 1;
    184.         }
    185.  
    186.         .main:hover .twitter {
    187.             opacity: 1;
    188.         }
    189.  
    190.         .main:hover .dribble {
    191.             opacity: 1;
    192.         }
    193.  
    194.         .main:hover .codepen {
    195.             opacity: 1;
    196.         }
    197.  
    198.         .main:hover .uiverse {
    199.             opacity: 1;
    200.         }
    201.  
    202.         .main:hover .discord {
    203.             opacity: 1;
    204.         }
    205.  
    206.         .main:hover .github {
    207.             opacity: 1;
    208.         }
    209.  
    210.         .main:hover .telegram {
    211.             opacity: 1;
    212.         }
    213.  
    214.         .main:hover .reddit {
    215.             opacity: 1;
    216.         }
    217.  
    218.         .card:nth-child(1):hover {
    219.             background-color: #cc39a4;
    220.         }
    221.  
    222.         .card:nth-child(1):hover .instagram {
    223.             fill: white;
    224.         }
    225.  
    226.         .card:nth-child(2):hover {
    227.             background-color: #03A9F4;
    228.         }
    229.  
    230.         .card:nth-child(2):hover .twitter {
    231.             fill: white;
    232.         }
    233.  
    234.         .card:nth-child(3):hover {
    235.             background-color: #ffb5d2;
    236.         }
    237.  
    238.         .card:nth-child(3):hover .dribble {
    239.             fill: white;
    240.         }
    241.  
    242.         .card:nth-child(4):hover {
    243.             background-color: #1E1F26;
    244.         }
    245.  
    246.         .card:nth-child(4):hover .codepen {
    247.             fill: white;
    248.         }
    249.  
    250.         .card:nth-child(5):hover {
    251.             animation: backgroundIMG .1s;
    252.             animation-fill-mode: forwards;
    253.         }
    254.  
    255.         .card:nth-child(5):hover .uiverse #paint0_linear_501_142 stop {
    256.             stop-color: white;
    257.         }
    258.  
    259.         .card:nth-child(5):hover .uiverse #paint1_linear_501_142 stop {
    260.             stop-color: white;
    261.         }
    262.  
    263.         .card:nth-child(5):hover .uiverse #paint2_linear_501_142 stop {
    264.             stop-color: white;
    265.         }
    266.  
    267.         @keyframes backgroundIMG {
    268.             100% {
    269.                 background-image: linear-gradient(#BF66FF, #6248FF, #00DDEB);
    270.             }
    271.         }
    272.  
    273.         .card:nth-child(6):hover {
    274.             background-color: #8c9eff;
    275.         }
    276.  
    277.         .card:nth-child(6):hover .discord {
    278.             fill: white;
    279.         }
    280.  
    281.         .card:nth-child(7):hover {
    282.             background-color: black;
    283.         }
    284.  
    285.         .card:nth-child(7):hover .github {
    286.             fill: white;
    287.         }
    288.  
    289.         .card:nth-child(8):hover {
    290.             background-color: #29b6f6;
    291.         }
    292.  
    293.         .card:nth-child(8):hover .telegram>path:nth-of-type(1) {
    294.             fill: white;
    295.         }
    296.  
    297.         .card:nth-child(8):hover .telegram>path:nth-of-type(2) {
    298.             fill: #29b6f6;
    299.         }
    300.  
    301.         .card:nth-child(8):hover .telegram>path:nth-of-type(3) {
    302.             fill: #29b6f6;
    303.         }
    304.  
    305.         .card:nth-child(9):hover {
    306.             background-color: rgb(255, 69, 0);
    307.         }
    308.  
    309.         .card:nth-child(9) .reddit>g circle {
    310.             fill: rgb(255, 69, 0);
    311.         }
    312.  
    313.         .card:nth-child(9) .reddit>g path {
    314.             fill: white;
    315.         }
    316.  
    317.         .text {
    318.             position: absolute;
    319.             font-size: 0.7em;
    320.             transition: .4s ease-in-out;
    321.             color: black;
    322.             text-align: center;
    323.             font-weight: bold;
    324.             letter-spacing: 0.33em;
    325.             z-index: 3;
    326.         }
    327.     style>
    328. head>
    329.  
    330. <body>
    331.     <div class="cantainer">
    332.         <h1 class="welcome">欢迎来到彩色之外，您好h1>
    333.         <div class="info">其余ICON，更多功能在开发，请您点击中间UI，或者点击GitHub查阅文档div>
    334.     div>
    335.     <div class="main">
    336.         <div class="card">
    337.             <svg fill-rule="nonzero" height="30px" width="30px" viewBox="0,0,256,256"
    338.                 xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" class="instagram">
    339.                 <g style="mix-blend-mode: normal" text-anchor="none" font-size="none" font-weight="none"
    340.                     font-family="none" stroke-dashoffset="0" stroke-dasharray="" stroke-miterlimit="10"
    341.                     stroke-linejoin="miter" stroke-linecap="butt" stroke-width="1" stroke="none" fill-rule="nonzero">
    342.                     <g transform="scale(8,8)">
    343.                         <path
    344.                             d="M11.46875,5c-3.55078,0 -6.46875,2.91406 -6.46875,6.46875v9.0625c0,3.55078 2.91406,6.46875 6.46875,6.46875h9.0625c3.55078,0 6.46875,-2.91406 6.46875,-6.46875v-9.0625c0,-3.55078 -2.91406,-6.46875 -6.46875,-6.46875zM11.46875,7h9.0625c2.47266,0 4.46875,1.99609 4.46875,4.46875v9.0625c0,2.47266 -1.99609,4.46875 -4.46875,4.46875h-9.0625c-2.47266,0 -4.46875,-1.99609 -4.46875,-4.46875v-9.0625c0,-2.47266 1.99609,-4.46875 4.46875,-4.46875zM21.90625,9.1875c-0.50391,0 -0.90625,0.40234 -0.90625,0.90625c0,0.50391 0.40234,0.90625 0.90625,0.90625c0.50391,0 0.90625,-0.40234 0.90625,-0.90625c0,-0.50391 -0.40234,-0.90625 -0.90625,-0.90625zM16,10c-3.30078,0 -6,2.69922 -6,6c0,3.30078 2.69922,6 6,6c3.30078,0 6,-2.69922 6,-6c0,-3.30078 -2.69922,-6 -6,-6zM16,12c2.22266,0 4,1.77734 4,4c0,2.22266 -1.77734,4 -4,4c-2.22266,0 -4,-1.77734 -4,-4c0,-2.22266 1.77734,-4 4,-4z">
    345.                         path>
    346.                     g>
    347.                 g>
    348.             svg>
    349.         div>
    350.         <div class="card">
    351.             <svg height="30px" width="30px" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" class="twitter">
    352.                 <path
    353.                     d="M42,12.429c-1.323,0.586-2.746,0.977-4.247,1.162c1.526-0.906,2.7-2.351,3.251-4.058c-1.428,0.837-3.01,1.452-4.693,1.776C34.967,9.884,33.05,9,30.926,9c-4.08,0-7.387,3.278-7.387,7.32c0,0.572,0.067,1.129,0.193,1.67c-6.138-0.308-11.582-3.226-15.224-7.654c-0.64,1.082-1,2.349-1,3.686c0,2.541,1.301,4.778,3.285,6.096c-1.211-0.037-2.351-0.374-3.349-0.914c0,0.022,0,0.055,0,0.086c0,3.551,2.547,6.508,5.923,7.181c-0.617,0.169-1.269,0.263-1.941,0.263c-0.477,0-0.942-0.054-1.392-0.135c0.94,2.902,3.667,5.023,6.898,5.086c-2.528,1.96-5.712,3.134-9.174,3.134c-0.598,0-1.183-0.034-1.761-0.104C9.268,36.786,13.152,38,17.321,38c13.585,0,21.017-11.156,21.017-20.834c0-0.317-0.01-0.633-0.025-0.945C39.763,15.197,41.013,13.905,42,12.429">
    354.                 path>
    355.             svg>
    356.         div>
    357.         <div class="card">
    358.             <svg height="30px" width="30px" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg" class="dribble">
    359.                 <path
    360.                     d="M20,38.5C9.799,38.5,1.5,30.201,1.5,20S9.799,1.5,20,1.5S38.5,9.799,38.5,20S30.201,38.5,20,38.5z">
    361.                 path>
    362.                 <path
    363.                     d="M20,2c9.925,0,18,8.075,18,18s-8.075,18-18,18S2,29.925,2,20S10.075,2,20,2 M20,1 C9.507,1,1,9.507,1,20s8.507,19,19,19s19-8.507,19-19S30.493,1,20,1L20,1z"
    364.                     fill="#ea4c89">path>
    365.                 <path
    366.                     d="M28.352 36.914c0 0-3.032-21.087-15.63-34.292M1.269 17.848c0 0 24.2 2.117 32.075-11.102M7.804 34.152c0 0 8.624-19.807 31.058-12.194"
    367.                     stroke-miterlimit="10" stroke="#ea4c89" fill="none">path>
    368.             svg>
    369.         div>
    370.         <div class="card">
    371.             <svg height="30px" width="30px" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg" class="codepen">
    372.                 <path
    373.                     d="M 25 4 L 4 17.34375 L 4 32.652344 L 25 46 L 46 32.65625 L 46 17.34375 Z M 25 29.183594 L 19.066406 25.070313 L 25 21.023438 L 30.933594 25.070313 Z M 27 17.605469 L 27 9.949219 L 40.429688 18.484375 L 34.410156 22.65625 Z M 23 17.605469 L 15.589844 22.65625 L 9.570313 18.484375 L 23 9.949219 Z M 12.09375 25.042969 L 8 27.832031 L 8 22.203125 Z M 15.570313 27.453125 L 23 32.605469 L 23 40.050781 L 9.589844 31.527344 Z M 27 32.605469 L 34.429688 27.453125 L 40.410156 31.527344 L 27 40.050781 Z M 37.90625 25.042969 L 42 22.203125 L 42 27.832031 Z">
    374.                 path>
    375.             svg>
    376.         div>
    377.         <div class="card" title="下载">
    378.             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" height="23x" width="23px" class="uiverse">
    379.                 <path fill="url(#paint0_linear_501_142)"
    380.                     d="M38.0481 4.82927C38.0481 2.16214 40.018 0 42.4481 0H51.2391C53.6692 0 55.6391 2.16214 55.6391 4.82927V40.1401C55.6391 48.8912 53.2343 55.6657 48.4248 60.4636C43.6153 65.2277 36.7304 67.6098 27.7701 67.6098C18.8099 67.6098 11.925 65.2953 7.11548 60.6663C2.37183 56.0036 3.8147e-06 49.2967 3.8147e-06 40.5456V4.82927C3.8147e-06 2.16213 1.96995 0 4.4 0H13.2405C15.6705 0 17.6405 2.16214 17.6405 4.82927V39.1265C17.6405 43.7892 18.4805 47.2018 20.1605 49.3642C21.8735 51.5267 24.4759 52.6079 27.9678 52.6079C31.4596 52.6079 34.0127 51.5436 35.6268 49.4149C37.241 47.2863 38.0481 43.8399 38.0481 39.0758V4.82927Z">
    381.                 path>
    382.                 <path fill="url(#paint1_linear_501_142)"
    383.                     d="M86.9 61.8682C86.9 64.5353 84.9301 66.6975 82.5 66.6975H73.6595C71.2295 66.6975 69.2595 64.5353 69.2595 61.8682V4.82927C69.2595 2.16214 71.2295 0 73.6595 0H82.5C84.9301 0 86.9 2.16214 86.9 4.82927V61.8682Z">
    384.                 path>
    385.                 <path fill="url(#paint2_linear_501_142)"
    386.                     d="M2.86102e-06 83.2195C2.86102e-06 80.5524 1.96995 78.3902 4.4 78.3902H83.6C86.0301 78.3902 88 80.5524 88 83.2195V89.1707C88 91.8379 86.0301 94 83.6 94H4.4C1.96995 94 0 91.8379 0 89.1707L2.86102e-06 83.2195Z">
    387.                 path>
    388.                 <defs>
    389.                     <linearGradient gradientUnits="userSpaceOnUse" y2="87.6201" x2="96.1684" y1="0" x1="0"
    390.                         id="paint0_linear_501_142">
    391.                         <stop stop-color="#BF66FF">stop>
    392.                         <stop stop-color="#6248FF" offset="0.510417">stop>
    393.                         <stop stop-color="#00DDEB" offset="1">stop>
    394.                     linearGradient>
    395.                     <linearGradient gradientUnits="userSpaceOnUse" y2="87.6201" x2="96.1684" y1="0" x1="0"
    396.                         id="paint1_linear_501_142">
    397.                         <stop stop-color="#BF66FF">stop>
    398.                         <stop stop-color="#6248FF" offset="0.510417">stop>
    399.                         <stop stop-color="#00DDEB" offset="1">stop>
    400.                     linearGradient>
    401.                     <linearGradient gradientUnits="userSpaceOnUse" y2="87.6201" x2="96.1684" y1="0" x1="0"
    402.                         id="paint2_linear_501_142">
    403.                         <stop stop-color="#BF66FF">stop>
    404.                         <stop stop-color="#6248FF" offset="0.510417">stop>
    405.                         <stop stop-color="#00DDEB" offset="1">stop>
    406.                     linearGradient>
    407.                 defs>
    408.             svg>
    409.         div>
    410.         <div class="card">
    411.             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="30px" height="30px" class="discord">
    412.                 <path
    413.                     d="M40,12c0,0-4.585-3.588-10-4l-0.488,0.976C34.408,10.174,36.654,11.891,39,14c-4.045-2.065-8.039-4-15-4s-10.955,1.935-15,4c2.346-2.109,5.018-4.015,9.488-5.024L18,8c-5.681,0.537-10,4-10,4s-5.121,7.425-6,22c5.162,5.953,13,6,13,6l1.639-2.185C13.857,36.848,10.715,35.121,8,32c3.238,2.45,8.125,5,16,5s12.762-2.55,16-5c-2.715,3.121-5.857,4.848-8.639,5.815L33,40c0,0,7.838-0.047,13-6C45.121,19.425,40,12,40,12z M17.5,30c-1.933,0-3.5-1.791-3.5-4c0-2.209,1.567-4,3.5-4s3.5,1.791,3.5,4C21,28.209,19.433,30,17.5,30z M30.5,30c-1.933,0-3.5-1.791-3.5-4c0-2.209,1.567-4,3.5-4s3.5,1.791,3.5,4C34,28.209,32.433,30,30.5,30z">
    414.                 path>
    415.             svg>
    416.         div>
    417.         <div class="card" title="博文">
    418.             <svg height="30px" width="30px" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg" class="github">
    419.                 <path
    420.                     d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z">
    421.                 path>
    422.             svg>
    423.         div>
    424.         <div class="card">
    425.             <svg height="30px" width="30px" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" class="telegram">
    426.                 <path d="M24 4A20 20 0 1 0 24 44A20 20 0 1 0 24 4Z">path>
    427.                 <path
    428.                     d="M33.95,15l-3.746,19.126c0,0-0.161,0.874-1.245,0.874c-0.576,0-0.873-0.274-0.873-0.274l-8.114-6.733 l-3.97-2.001l-5.095-1.355c0,0-0.907-0.262-0.907-1.012c0-0.625,0.933-0.923,0.933-0.923l21.316-8.468 c-0.001-0.001,0.651-0.235,1.126-0.234C33.667,14,34,14.125,34,14.5C34,14.75,33.95,15,33.95,15z"
    429.                     fill="#fff">path>
    430.                 <path
    431.                     d="M23,30.505l-3.426,3.374c0,0-0.149,0.115-0.348,0.12c-0.069,0.002-0.143-0.009-0.219-0.043 l0.964-5.965L23,30.505z"
    432.                     fill="#b0bec5">path>
    433.                 <path
    434.                     d="M29.897,18.196c-0.169-0.22-0.481-0.26-0.701-0.093L16,26c0,0,2.106,5.892,2.427,6.912 c0.322,1.021,0.58,1.045,0.58,1.045l0.964-5.965l9.832-9.096C30.023,18.729,30.064,18.416,29.897,18.196z"
    435.                     fill="#cfd8dc">path>
    436.             svg>
    437.         div>
    438.         <div class="card">
    439.             <svg xml:space="preserve" viewBox="0 0 256 256" height="30" width="30" version="1.1"
    440.                 xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" class="reddit">
    441.                 <defs>
    442.                 defs>
    443.                 <g transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)"
    444.                     style="stroke: none; border-radius:50%; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;">
    445.                     <circle transform="matrix(1 0 0 1 0 0)"
    446.                         style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
    447.                         r="45" cy="45" cx="45">circle>
    448.                     <path stroke-linecap="round" transform="matrix(1 0 0 1 0 0)"
    449.                         style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1;"
    450.                         d="M 75.011 45 c -0.134 -3.624 -3.177 -6.454 -6.812 -6.331 c -1.611 0.056 -3.143 0.716 -4.306 1.823 c -5.123 -3.49 -11.141 -5.403 -17.327 -5.537 l 2.919 -14.038 l 9.631 2.025 c 0.268 2.472 2.483 4.262 4.955 3.993 c 2.472 -0.268 4.262 -2.483 3.993 -4.955 s -2.483 -4.262 -4.955 -3.993 c -1.421 0.145 -2.696 0.973 -3.4 2.204 L 48.68 17.987 c -0.749 -0.168 -1.499 0.302 -1.667 1.063 c 0 0.011 0 0.011 0 0.022 l -3.322 15.615 c -6.264 0.101 -12.36 2.025 -17.55 5.537 c -2.64 -2.483 -6.801 -2.36 -9.284 0.291 c -2.483 2.64 -2.36 6.801 0.291 9.284 c 0.515 0.481 1.107 0.895 1.767 1.186 c -0.045 0.66 -0.045 1.32 0 1.98 c 0 10.078 11.745 18.277 26.23 18.277 c 14.485 0 26.23 -8.188 26.23 -18.277 c 0.045 -0.66 0.045 -1.32 0 -1.98 C 73.635 49.855 75.056 47.528 75.011 45 z M 30.011 49.508 c 0 -2.483 2.025 -4.508 4.508 -4.508 c 2.483 0 4.508 2.025 4.508 4.508 s -2.025 4.508 -4.508 4.508 C 32.025 53.993 30.011 51.991 30.011 49.508 z M 56.152 62.058 v -0.179 c -3.199 2.405 -7.114 3.635 -11.119 3.468 c -4.005 0.168 -7.919 -1.063 -11.119 -3.468 c -0.425 -0.515 -0.347 -1.286 0.168 -1.711 c 0.447 -0.369 1.085 -0.369 1.544 0 c 2.707 1.98 6.007 2.987 9.362 2.83 c 3.356 0.179 6.667 -0.783 9.407 -2.74 c 0.492 -0.481 1.297 -0.47 1.779 0.022 C 56.655 60.772 56.644 61.577 56.152 62.058 z M 55.537 54.34 c -0.078 0 -0.145 0 -0.224 0 l 0.034 -0.168 c -2.483 0 -4.508 -2.025 -4.508 -4.508 s 2.025 -4.508 4.508 -4.508 s 4.508 2.025 4.508 4.508 C 59.955 52.148 58.02 54.239 55.537 54.34 z">
    451.                     path>
    452.                 g>
    453.             svg>
    454.         div>
    455.         <p class="text">HOVER<br><br>FOR<br><br>SOCIALp>
    456.         <div class="main_back">div>
    457.     div>
    458.  
    459.     <script>
    460.         // 点击github图标跳转到github
    461.         document.querySelector('.github').onclick = function () {
    462.             window.open('https://blog.csdn.net/m0_57904695/article/details/129950163');
    463.         }
    464.         // 点击uiverse图标跳转到uiverse
    465.         document.querySelector('.uiverse').onclick = function () {
    466.             // 新窗口打开
    467.             // window.open('http://project.webcats.cn/bx/43924/11881/zk.zip');
    468.             // 当前页面打开
    469.             window.location.href = 'http://project.webcats.cn/bx/43924/27623/Download.zip';
    470.             // alert('稍等片刻，即可下载');
    471.             // 一秒后将文追加到body 稍等片刻，即可下载，三秒后回复正常
    472.             document.body.innerHTML += '稍等片刻，即可下载';
    473.         }
    474.  
    475.         document.querySelector('.discord').onclick = function () {
    476.             // 新窗口打开
    477.             // window.open('http://project.webcats.cn/bx/43924/15055/zk.zip');
    478.             // 当前页面打开
    479.             window.location.href = 'http://project.webcats.cn/bx/43924/27623/Download.zip';
    480.             // alert('稍等片刻，即可下载');
    481.             // 一秒后将文追加到body 稍等片刻，即可下载，三秒后回复正常
    482.             document.body.innerHTML += '稍等片刻，即可下载';
    483.         }
    484.  
    485.     script>
    486. body>
    487.  
    488. html>

    启动应用所有代码，可自行扩展及考虑边缘问题 兼容性

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.   <title>网站请求打开APPtitle>
    7.   <style>
    8.     body {
    9.       font-family: Arial, sans-serif;
    10.       text-align: center;
    11.     }
    12.  
    13.     h1 {
    14.       font-size: 24px;
    15.       color: #333;
    16.       margin-top: 20px;
    17.     }
    18.     
    19.     button {
    20.       background-color: #00B04F;
    21.       border: none;
    22.       color: white;
    23.       padding: 10px 20px;
    24.       text-align: center;
    25.       text-decoration: none;
    26.       display: inline-block;
    27.       font-size: 16px;
    28.       margin: 10px 2px;
    29.       cursor: pointer;
    30.       border-radius: 5px;
    31.     }
    32.     
    33.     button:hover {
    34.       opacity: 0.8;
    35.     }
    36.   style>
    37. head>
    38. <body>
    39.   <h1>请在浏览器中打开此网页h1>
    40.   
    41.   <button onclick="window.open('weixin://1334132303');">请求打开微信button>
    42.   <button onclick="window.open('mqq://1334132303');">请求打开QQbutton>
    43.   <button onclick="window.open('kwai://home/://');">请求打开快手button>
    44.   <button onclick="window.open('tel://');">请求打开电话button>
    45.   <button onclick="window.open('sms://');">请求打开信息button>
    46. body>
    47. html>
    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <title>新年快乐-打开应用title>
    8.   <link rel="stylesheet" type="text/css" href="./S.css">
    9. head>
    10.  
    11. <body>
    12.   <div class="deng-box">
    13.     <div class="deng">
    14.       <div class="xian">div>
    15.       <div class="deng-a">
    16.         <div class="deng-b">
    17.           <div class="deng-t">年div>
    18.         div>
    19.       div>
    20.       <div class="shui shui-a">
    21.         <div class="shui-c">div>
    22.         <div class="shui-b">div>
    23.       div>
    24.     div>
    25.   div>
    26.   <div class="deng-box2">
    27.     <div class="deng">
    28.       <div class="xian">div>
    29.       <div class="deng-a">
    30.         <div class="deng-b">
    31.           <div class="deng-t">龙div>
    32.         div>
    33.       div>
    34.       <div class="shui shui-a">
    35.         <div class="shui-c">div>
    36.         <div class="shui-b">div>
    37.       div>
    38.     div>
    39.   div>
    40.   <button id="openWeChat">请求打开微信button>
    41.   <button id="openQQ">请求打开QQbutton>
    42.   <button id="openKuaishou">请求打开快手button>
    43.   <button id="openTelephone">请求打开电话button>
    44.   <button id="openSMS">请求打开信息button>
    45.  
    46.   <script>
    47.     document.getElementById('openWeChat').addEventListener('click', function () {
    48.       window.open('weixin://');
    49.     });
    50.  
    51.     document.getElementById('openQQ').addEventListener('click', function () {
    52.       window.open('mqq://1334132303');
    53.     });
    54.  
    55.     document.getElementById('openKuaishou').addEventListener('click', function () {
    56.       window.open('kwai://home/://');
    57.     });
    58.  
    59.     document.getElementById('openTelephone').addEventListener('click', function () {
    60.       window.open('tel:66666666');
    61.     });
    62.  
    63.     document.getElementById('openSMS').addEventListener('click', function () {
    64.       var phoneNumber = '1234567890';
    65.       var message = '这是短信内容';
    66.       var url = 'sms:' + phoneNumber + '?body=' + encodeURIComponent(message);
    67.       window.open(url);
    68.     });
    69.   script>
    70. body>
    71.  
    72. html>
    1. body {
    2.       font-family: Arial, sans-serif;
    3.       text-align: center;margin-top:380px;
    4.     }
    5.     
    6.     button {
    7.  
    8.       background-color: #00B04F;
    9.       border: none;
    10.       color: white;
    11.       padding: 10px 20px;
    12.       text-align: center;
    13.       text-decoration: none;
    14.       display: inline-block;
    15.       font-size: 16px;
    16.       margin: 10px 2px;
    17.       cursor: pointer;
    18.       border-radius: 5px;
    19.     }
    20.     button:hover {
    21.       opacity: 0.8;
    22.     }
    23.  
    24. .deng-box {
    25.     position: fixed;
    26.     top: -40px;
    27.     right: -20px;
    28.     z-index: 1999;
    29. }
    30.  
    31. .deng-box1 {
    32.     position: fixed;
    33.     top: -30px;
    34.     right: 30px;
    35.     z-index: 1998;
    36. }
    37.  
    38. .deng-box2 {
    39.     position: fixed;
    40.     top: -40px;
    41.     left: -20px;
    42.     z-index: 1999;
    43. }
    44.  
    45.  .deng-box3 {
    46.     position: fixed;
    47.     top: -30px;
    48.     left: 30px;
    49.     z-index: 1998;
    50. }
    51.  
    52. .deng-box1 .deng,
    53. .deng-box3 .deng{
    54.     position: relative;
    55.     width: 120px;
    56.     height: 90px;
    57.     margin: 50px;
    58.     background: #d8000f;
    59.     background: rgba(216, 0, 15, 0.8);
    60.     border-radius: 50% 50%;
    61.     -webkit-transform-origin: 50% -100px;
    62.     -webkit-animation: swing 5s infinite ease-in-out;
    63.     animation: swing 5s infinite ease-in-out;
    64.     box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
    65. }
    66. .deng,
    67. .deng-box2 .deng{
    68.     position: relative;
    69.     width: 120px;
    70.     height: 90px;
    71.     margin: 50px;
    72.     background: #d8000f;
    73.     background: rgba(216, 0, 15, 0.8);
    74.     border-radius: 50% 50%;
    75.     -webkit-transform-origin: 50% -100px;
    76.     -webkit-animation: swing 3s infinite ease-in-out;
    77.     animation: swing 3s infinite ease-in-out;
    78.     box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
    79. }
    80.  
    81. .deng-a {
    82.     width: 100px;
    83.     height: 90px;
    84.     background: #d8000f;
    85.     background: rgba(216, 0, 15, 0.1);
    86.     margin: 12px 8px 8px 10px;
    87.     border-radius: 50% 50%;
    88.     border: 2px solid #dc8f03;
    89. }
    90.  
    91. .deng-b {
    92.     width: 45px;
    93.     height: 90px;
    94.     background: #d8000f;
    95.     background: rgba(216, 0, 15, 0.1);
    96.     margin: -4px 8px 8px 26px;
    97.     border-radius: 50% 50%;
    98.     border: 2px solid #dc8f03;
    99. }
    100.  
    101. .xian {
    102.     position: absolute;
    103.     top: -20px;
    104.     left: 60px;
    105.     width: 2px;
    106.     height: 20px;
    107.     background: #dc8f03;
    108. }
    109.  
    110. .shui-a {
    111.     position: relative;
    112.     width: 5px;
    113.     height: 20px;
    114.     margin: -5px 0 0 59px;
    115.     -webkit-animation: swing 4s infinite ease-in-out;
    116.     -webkit-transform-origin: 50% -45px;
    117.     background: #ffa500;
    118.     border-radius: 0 0 5px 5px;
    119. }
    120.  
    121. .shui-b {
    122.     position: absolute;
    123.     top: 14px;
    124.     left: -2px;
    125.     width: 10px;
    126.     height: 10px;
    127.     background: #dc8f03;
    128.     border-radius: 50%;
    129. }
    130.  
    131. .shui-c {
    132.     position: absolute;
    133.     top: 18px;
    134.     left: -2px;
    135.     width: 10px;
    136.     height: 35px;
    137.     background: #ffa500;
    138.     border-radius: 0 0 0 5px;
    139. }
    140.  
    141. .deng:before {
    142.     position: absolute;
    143.     top: -7px;
    144.     left: 29px;
    145.     height: 12px;
    146.     width: 60px;
    147.     content: " ";
    148.     display: block;
    149.     z-index: 1999;
    150.     border-radius: 5px 5px 0 0;
    151.     border: solid 1px #dc8f03;
    152.     background: #ffa500;
    153.     background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
    154. }
    155.  
    156. .deng:after {
    157.     position: absolute;
    158.     bottom: -7px;
    159.     left: 10px;
    160.     height: 12px;
    161.     width: 60px;
    162.     content: " ";
    163.     display: block;
    164.     margin-left: 20px;
    165.     border-radius: 0 0 5px 5px;
    166.     border: solid 1px #dc8f03;
    167.     background: #ffa500;
    168.     background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
    169. }
    170.  
    171. .deng-t {
    172.     font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
    173.     font-size: 3.2rem;
    174.     color: #dc8f03;
    175.     font-weight: bold;
    176.     line-height: 85px;
    177.     text-align: center;
    178. }
    179.  
    180. .night .deng-t, 
    181. .night .deng-box, 
    182. .night .deng-box1，
    183. .night .deng-box2，
    184. .night .deng-box3{
    185.     background: transparent !important;
    186. }
    187.  
    188. @keyframes swing { 
    189.     0% { transform: rotate(-10deg) } 
    190.     50% { transform: rotate(10deg) } 
    191.     100% { transform: rotate(-10deg) } 
    192. }
    193.  
    194. @-moz-keyframes swing {
    195.     0% { -moz-transform: rotate(-10deg) }
    196.     50% { -moz-transform: rotate(10deg) }
    197.     100% { -moz-transform: rotate(-10deg) }
    198. }
    199.  
    200. @-webkit-keyframes swing {
    201.     0% { -webkit-transform: rotate(-10deg) }
    202.     50% { -webkit-transform: rotate(10deg) }
    203.     100% { -webkit-transform: rotate(-10deg) }
    204. }
    205. .display-name{
    206.     background-image: -webkit-linear-gradient(90deg, #07c160, #fb6bea 25%, #3aedff 50%, #fb6bea 75%, #28d079);
    207.     -webkit-text-fill-color: transparent;
    208.     -webkit-background-clip: text;
    209.     background-size: 100% 600%;
    210.     animation: wzw 10s linear infinite;
    211.     }
    212.     @keyframes wzw {
    213.     0% {
    214.     background-position: 0 0;
    215.     }
    216.     100% {
    217.     background-position: 0 -300%;
    218.     }
    219.     }
    220.     ::-webkit-scrollbar {
    221.         width: 10px;  
    222.         height: 1px;
    223.       }
    224.       ::-webkit-scrollbar-thumb {
    225.         background-color: #12b7f5;
    226.         background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%, rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
    227.       }
    228.       ::-webkit-scrollbar-track {
    229.           -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    230.           background: #f6f6f6;
    231.       }

    7730e2bd39d64179909767e1967da702.jpeg

     _______________________________  期待再见  _______________________________

  • 相关阅读:
    Vite3搭建Vue3项目
    文件操作（1）
    H5调用摄像头扫码详解
    no permission 这种问题的解决方法
    MMSeg搭建自己的网络
    【Python自学笔记】Flask调教方法Internel Server Error
    【Python+Appium】开展自动化测试（一）
    manim边做边学--通用三维坐标系
    只想做个一门心思只赚钱的打工人？这4种收入你都有吗？
    JAVA分布式系统
  • 原文地址：https://blog.csdn.net/m0_57904695/article/details/136304084