image.png

    1. <!DOCTYPE html>
    2. <html lang="en">
    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">
    8.     <title>头像背景 from 图灵机器人官网</title>
    9.     <style>
    10.         body {
    11.             background-color: #aaa;
    12.         }
    14.         .avatar-box {
    15.             /* background: linear-gradient(135deg, #2598d6, #5557ff); */
    16.             width: 423px;
    17.             height: 419px;
    18.             position: relative;
    19.         }
    21.         .avatar-box i {
    22.             display: inline-block;
    23.             width: 100%;
    24.             height: 100%;
    25.             position: absolute;
    26.             top: 0;
    27.             left: 0;
    28.             -webkit-transform-origin: center center;
    29.             transform-origin: center center;
    30.         }
    32.         .oval1 {
    33.             background: url("oval1.png") 50% no-repeat;
    34.             animation: shunScroll 15s infinite;
    35.         }
    37.         .oval2 {
    38.             background: url("oval2.png") 50% no-repeat;
    39.             animation: niScroll 15s infinite;
    40.         }
    42.         .oval3 {
    43.             background: url("oval3.png") 50% no-repeat;
    44.             animation: niScroll 15s infinite;
    45.         }
    47.         .oval4 {
    48.             background: url("oval4.png") 50% no-repeat;
    49.             animation: shunScroll 15s infinite;
    50.         }
    52.         @-webkit-keyframes shunScroll {
    53.             0% {
    54.                 -webkit-transform: rotate(0deg);
    55.                 transform: rotate(0deg);
    56.             }
    57.             50% {
    58.                 -webkit-transform: rotate(180deg);
    59.                 transform: rotate(180deg);
    60.             }
    61.             100% {
    62.                 -webkit-transform: rotate(0deg);
    63.                 transform: rotate(0deg);
    64.             }
    65.         }
    67.         @keyframes shunScroll {
    68.             0% {
    69.                 -webkit-transform: rotate(0deg);
    70.                 transform: rotate(0deg);
    71.             }
    72.             50% {
    73.                 -webkit-transform: rotate(180deg);
    74.                 transform: rotate(180deg);
    75.             }
    76.             100% {
    77.                 -webkit-transform: rotate(0deg);
    78.                 transform: rotate(0deg);
    79.             }
    80.         }
    82.         @-webkit-keyframes niScroll {
    83.             0% {
    84.                 -webkit-transform: rotate(180deg);
    85.                 transform: rotate(180deg);
    86.             }
    87.             50% {
    88.                 -webkit-transform: rotate(0deg);
    89.                 transform: rotate(0deg);
    90.             }
    91.             100% {
    92.                 -webkit-transform: rotate(180deg);
    93.                 transform: rotate(180deg);
    94.             }
    95.         }
    97.         @keyframes niScroll {
    98.             0% {
    99.                 -webkit-transform: rotate(180deg);
    100.                 transform: rotate(180deg);
    101.             }
    102.             50% {
    103.                 -webkit-transform: rotate(0deg);
    104.                 transform: rotate(0deg);
    105.             }
    106.             100% {
    107.                 -webkit-transform: rotate(180deg);
    108.                 transform: rotate(180deg);
    109.             }
    110.         }
    112.         .title {
    113.             position: absolute;
    114.             top: 0;
    115.             left: 0;
    116.             width: 100%;
    117.             height: 100%;
    118.             font-size: 8rem;
    119.             display: flex;
    120.             justify-content: center;
    121.             align-items: center;
    122.             color: #5557ff;
    123.         }
    124.     </style>
    125. </head>
    127. <body>
    128.     <div class="avatar-box">
    129.         <i class="oval1"></i>
    130.         <i class="oval2"></i>
    131.         <i class="oval3"></i>
    132.         <i class="oval4"></i>
    133.         <section class="title">Hu</section>
    134.     </div>
    135. </body>
    137. </html>