• 实现Loading倒影效果-webkit-box-reflect

    1. html>
    2. <html lang="zh-CN">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.   <title>loading倒影效果title>
    9. head>
    10.  
    11. <body>
    12.   <div class="container">
    13.     <span>Loading...span>
    14.     <div class="circle">
    15.       <div class="ring">div>
    16.     div>
    17.   div>
    18. body>
    19.  
    20. html>
    21. <style>
    22. * {
    23.     margin: 0;
    24.     padding: 0;
    25.     box-sizing: border-box;
    26.   }
    27.  
    28.     body {
    29.       height: 100vh;
    30.       display: flex;
    31.       justify-content: center;
    32.       align-items: center;
    33.       background-color: rgb(7, 15, 26);
    34.     }
    35.  
    36.     .container {
    37.       position: relative;
    38.       height: 150px;
    39.       width: 250px;
    40.       -webkit-box-reflect: below 1px linear-gradient(transparent, rgb(7, 15, 26));
    41.     }
    42.  
    43.     .container>span {
    44.       position: absolute;
    45.       left: 50%;
    46.       top: 50%;
    47.       transform: translate(-50%, -50%);
    48.       color: rgb(20, 129, 202);
    49.       text-shadow: 0 0 10px rgb(20, 129, 202),
    50.         0 0 30px rgb(20, 129, 202),
    51.         0 0 60px rgb(20, 129, 202),
    52.         0 0 100px rgb(20, 129, 202);
    53.       font-size: 18px;
    54.       z-index: 1;
    55.  
    56.     }
    57.  
    58.     .circle {
    59.       position: relative;
    60.       margin: 0 auto;
    61.       height: 150px;
    62.       width: 150px;
    63.       background-color: rgb(13, 10, 37);
    64.       border-radius: 50%;
    65.       animation: zhuan 2s linear infinite;
    66.     }
    67.  
    68.     @keyframes zhuan {
    69.       0% {
    70.  
    71.         transform: rotate(0deg);
    72.       }
    73.  
    74.       100% {
    75.  
    76.         transform: rotate(360deg);
    77.       }
    78.     }
    79.  
    80.     .circle::after {
    81.       content: '';
    82.       position: absolute;
    83.       top: 10px;
    84.       left: 10px;
    85.       right: 10px;
    86.       bottom: 10px;
    87.       background-color: rgb(7, 15, 26);
    88.       border-radius: 50%;
    89.     }
    90.  
    91.     .ring {
    92.       position: absolute;
    93.       top: 0;
    94.       left: 0;
    95.       width: 75px;
    96.       height: 150px;
    97.       background-image: linear-gradient(180deg, rgb(22, 121, 252), transparent 80%);
    98.       border-radius: 75px 0 0 75px;
    99.  
    100.     }
    101.  
    102.     .ring::after {
    103.       content: '';
    104.       position: absolute;
    105.       right: -5px;
    106.       top: -2.5px;
    107.       width: 15px;
    108.       height: 15px;
    109.       background-color: rgb(40, 124, 202);
    110.       box-shadow: 0 0 5px rgb(40, 151, 202),
    111.         0 0 10px rgb(40, 124, 202),
    112.         0 0 20px rgb(40, 124, 202),
    113.         0 0 30px rgb(40, 124, 202),
    114.         0 0 40px rgb(40, 124, 202),
    115.         0 0 50px rgb(40, 124, 202),
    116.         0 0 60px rgb(40, 124, 202),
    117.         0 0 60px rgb(40, 124, 202);
    118.       border-radius: 50%;
    119.       z-index: 1;
    120.  
    121.     }
    122. style>

    最终效果：

    https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d2fa6e0939d6419ab1a8e0b59b6bf8de~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.awebp

     

  • 相关阅读:
    Python使用MySQL，无记录则插入，有记录则更新 - ON DUPLICATE KEY UPDATE
    redis setnx分布锁使用
    【WSN定位】基于chan算法实现无源定位附matlab代码
    JavaWeb(十一) AJAX + json
    实战来了！聊聊电商系统中红包雨功能的设计与实现
    @Repository详解
    华为攻击防范简介
    aspnet zero core 11.3.0 Crack
    TVM编译入门概念 一
    ChatGPT新手指南：如何应用于学术论文撰写
  • 原文地址：https://blog.csdn.net/zx11_11/article/details/126164246