• css 雷达扫描图

    html 代码

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>css 雷达扫描title>
    6.     <style>
    7.         * {
    8.             margin: 0;
    9.             padding: 0;
    10.         }
    11.  
    12.         body {
    13.             background: #000000;
    14.             height: 100vh;
    15.             display: flex;
    16.             align-items: center;
    17.             overflow: hidden;
    18.         }
    19.  
    20.         .radar {
    21.             left: calc(50% - 250px);
    22.             width: 500px;
    23.             height: 500px;
    24.             overflow: hidden;
    25.             background: repeating-radial-gradient(transparent 0, transparent 27px, #43769e 27px, #43769e 30px),
    26.             linear-gradient(90deg, transparent 49.75%, #43768e 49.75%, #43769e 50.25%, transparent 50.25%),
    27.             linear-gradient(transparent 49.75%, #43768e 49.75%, #43769e 50.25%, transparent 50.25%);
    28.             border-radius: 50%;
    29.             position: absolute;
    30.         }
    31.  
    32.         .radar::before {
    33.             content: '';
    34.             position: absolute;
    35.             width: 250px;
    36.             height: 250px;
    37.             top: 0;
    38.             right: 50%;
    39.             background: linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, rgba(107, 183, 208, 1) 100%);
    40.             border-radius: 100% 0 0 0;
    41.         }
    42.  
    43.         @keyframes scanning {
    44.             to {
    45.                 transform: rotate(360deg);
    46.             }
    47.         }
    48.  
    49.         .radar::before {
    50.             animation: scanning 5s linear infinite;
    51.             transform-origin: right bottom;
    52.         }
    53.  
    54.         .radar::after {
    55.             content: '';
    56.             width: 10px;
    57.             height: 10px;
    58.             opacity: 0.5;
    59.             position: absolute;
    60.             left: 50%;
    61.             top: 50%;
    62.             background: rgba(107, 183, 208, 1);
    63.             border-radius: 50%;
    64.             transform: translate(-50%, -50%);
    65.             animation: scale 5s ease-in infinite;
    66.         }
    67.  
    68.         @keyframes scale {
    69.             60%, 100% {
    70.                 width: 800px;
    71.                 height: 800px;
    72.                 opacity: 0;
    73.             }
    74.         }
    75.  
    76.         .avatar {
    77.             position: absolute;
    78.             left: 50%;
    79.             top: 50%;
    80.             transform: translate(-50%, -50%);
    81.             width: 70px;
    82.             height: 70px;
    83.             border-radius: 50%;
    84.             border: 2px solid #ffffff;
    85.             z-index: 666;
    86.         }
    87.  
    88.         .girl {
    89.             position: absolute;
    90.             left: calc(50% + var(--l));
    91.             top: calc(50% + var(--t));
    92.             transform: translate(-50%, -50%) scale(var(--i));
    93.             width: 50px;
    94.             height: 50px;
    95.             border-radius: 50%;
    96.             object-fit: cover;
    97.             border: 2px solid #ff2972;
    98.             transform-origin: center;
    99.             z-index: 999;
    100.             animation: upDown 5s infinite linear;
    101.             animation-delay: calc(var(--d) * 5s);
    102.         }
    103.  
    104.         @keyframes upDown {
    105.             20% {
    106.                 transform: translate(-50%, -50%) scale(calc(var(--i) * 1.4));
    107.                 box-shadow: 0 0 10px #ff2972, 0 0 30px #ff2972, 0 0 50px #ff2972;
    108.             }
    109.             50%, 100% {
    110.                 transform: translate(-50%, -50%) scale(var(--i));
    111.                 box-shadow: none;
    112.             }
    113.         }
    114.  
    115.     style>
    116. head>
    117. <body>
    118. <div class="radar">
    119.     <img src="https://img0.baidu.com/it/u=1812506584,4117485459&fm=253&fmt=auto&app=138&f=JPEG?w=285&h=285" alt=""
    120.          class="avatar">
    121.     <img src="https://img2.baidu.com/it/u=3546753962,2515344656&fm=253&fmt=auto&app=138&f=JPEG?w=505&h=500" alt=""
    122.          class="girl" style="--i:0.5;--l:50px;--t:130px;--d:0.05;">
    123.     <img src="https://img0.baidu.com/it/u=2237881411,1442959134&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt=""
    124.          class="girl" style="--i:0.6;--l:130px;--t:50px;--d:0.28">
    125.     <img src="https://img2.baidu.com/it/u=3959851551,53095557&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt=""
    126.          class="girl" style="--i:0.9;--l:50px;--t:50px;--d:0.36">
    127.     <img src="https://img1.baidu.com/it/u=3519458463,1887460190&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt=""
    128.          class="girl" style="--i:0.7;--l:-50px;--t:90px;--d:0.55">
    129.     <img src="https://img2.baidu.com/it/u=1893304700,1248298429&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt=""
    130.          class="girl" style="--i:0.7;--l:-80px;--t:-50px;--d:0.80">
    131. div>
    132. body>
    133. html>

  • 相关阅读:
    接雨水问题
    C++单例的安全实现，double-check(双重检查锁定)的安全实现方法
    Android MediaCodec message机制分析
    leetcode链表系列(环形链表篇)
    微服务系统面经之三: 以秒杀系统为例-多级缓存及其更新机制
    Code Llama: Open Foundation Models for Code
    ImageKnife组件，让小白也能轻松搞定图片开发
    云上 Lakehouse 基础架构
    Node_exporter主机探针部署
    vscode软件上安装 Fitten Code插件及使用
  • 原文地址：https://blog.csdn.net/qq_35350009/article/details/134007131