image.png

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