• html 边缘融合加载

    html 代码

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>边缘融合加载title>
    6.     <style>
    7.         * {
    8.             margin: 0;
    9.             padding: 0;
    10.             box-sizing: border-box;
    11.         }
    12.  
    13.         body {
    14.             height: 100vh;
    15.             padding-bottom: 80px;
    16.             background: #000000;
    17.             display: flex;
    18.             justify-content: center;
    19.             align-items: center;
    20.             flex-direction: column;
    21.         }
    22.  
    23.         .loading {
    24.             width: 300px;
    25.             height: 300px;
    26.             background: #000000;
    27.             position: relative;
    28.             display: flex;
    29.             justify-content: center;
    30.             align-items: center;
    31.             filter: contrast(15);
    32.         }
    33.  
    34.         .loading span {
    35.             width: 30px;
    36.             height: 30px;
    37.             background: #ffffff;
    38.             border-radius: 50%;
    39.             position: absolute;
    40.             left: 50px;
    41.             transform-origin: 100px center;
    42.             transform: rotate(calc(360deg / 8 * var(--i)));
    43.             animation: show 3s infinite;
    44.             filter: blur(5px);
    45.         }
    46.  
    47.         @keyframes show {
    48.             0% {
    49.                 transform: rotate(0deg) translateX(80px);
    50.             }
    51.             50%, 100% {
    52.                 transform: rotate(calc(360deg / 8 * var(--i)));
    53.             }
    54.             100% {
    55.                 transform: rotate(360deg) translateX(80px);
    56.             }
    57.         }
    58.  
    59.         .text {
    60.             font-size: 20px;
    61.             color: #ffffff;
    62.             padding-left: 10px;
    63.             display: flex;
    64.         }
    65.  
    66.         .text span {
    67.             padding: 0 4px;
    68.             animation: upDown 1.5s ease-in-out infinite;
    69.             animation-delay: calc(0.1s * var(--i));
    70.         }
    71.  
    72.         @keyframes upDown {
    73.             0% {
    74.                 transform: translateY(0px);
    75.             }
    76.             20% {
    77.                 transform: translateY(-24px);
    78.             }
    79.             40%, 100% {
    80.                 transform: translateY(0px);
    81.             }
    82.         }
    83.     style>
    84. head>
    85. <body>
    86. <div class="loading">
    87.     <span style="--i:0;">span>
    88.     <span style="--i:1;">span>
    89.     <span style="--i:2;">span>
    90.     <span style="--i:3;">span>
    91.     <span style="--i:4;">span>
    92.     <span style="--i:5;">span>
    93.     <span style="--i:6;">span>
    94.     <span style="--i:7;">span>
    95. div>
    96. <div class="text">
    97.     <span style="--i:0">正span>
    98.     <span style="--i:1">在span>
    99.     <span style="--i:2">加span>
    100.     <span style="--i:3">中span>
    101.     <span style="--i:4">，span>
    102.     <span style="--i:5">请span>
    103.     <span style="--i:6">等span>
    104.     <span style="--i:7">待span>
    105.     <span style="--i:8">.span>
    106.     <span style="--i:9">.span>
    107.     <span style="--i:10">.span>
    108. div>
    109. body>
    110. html>

  • 相关阅读:
    Redis数据结构-String篇
    hadoop测试环境sqoop使用
    prometheus学习4Grafana监控mysql&blackbox了解
    计算机毕业设计之java+ssm的图书借阅系统
    kafka的安装与简单使用
    JavaWeb开发——文件上传
    圆周率介绍
    EDA软件断供对国产芯片发展有什么影响？
    7.24 - 每日一题 - 408
    wampserver简单配置
  • 原文地址：https://blog.csdn.net/qq_35350009/article/details/133377440