• 【css | loading】好看的loading特效

    示例：

    https://code.juejin.cn/pen/7277764394618978365

    html

    1. <div class="pl">
    2.   <div class="pl__dot">div>
    3.   <div class="pl__dot">div>
    4.   <div class="pl__dot">div>
    5.   <div class="pl__dot">div>
    6.   <div class="pl__dot">div>
    7.   <div class="pl__dot">div>
    8.   <div class="pl__dot">div>
    9.   <div class="pl__dot">div>
    10.   <div class="pl__dot">div>
    11.   <div class="pl__dot">div>
    12.   <div class="pl__dot">div>
    13.   <div class="pl__dot">div>
    14.   <div class="pl__text">Loading…div>
    15. div>

    css

    1. :root {
    2.   --bg: #454954;
    3.   --fg: #e3e4e8;
    4.   --fg-t: rgba(227, 228, 232, 0.5);
    5.   --primary1: #255ff4;
    6.   --primary2: #5583f6;
    7.   --trans-dur: 0.3s;
    8.   font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1280 - 320));
    9. }
    10.  
    11. body {
    12.   background-color: var(--bg);
    13.   background-image: linear-gradient(135deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    14.   color: var(--fg);
    15.   font: 1em/1.5 "Varela Round", Helvetica, sans-serif;
    16.   height: 100vh;
    17.   min-height: 360px;
    18.   display: grid;
    19.   place-items: center;
    20.   transition: background-color var(--trans-dur), color var(--trans-dur);
    21. }
    22.  
    23. .pl {
    24.   box-shadow: 2em 0 2em rgba(0, 0, 0, 0.2) inset, -2em 0 2em rgba(255, 255, 255, 0.1) inset;
    25.   display: flex;
    26.   justify-content: center;
    27.   align-items: center;
    28.   position: relative;
    29.   letter-spacing: 0.1em;
    30.   text-transform: uppercase;
    31.   transform: rotateX(30deg) rotateZ(45deg);
    32.   width: 15em;
    33.   height: 15em;
    34. }
    35. .pl, .pl__dot {
    36.   border-radius: 50%;
    37. }
    38. .pl__dot {
    39.   animation-name: shadow;
    40.   box-shadow: 0.1em 0.1em 0 0.1em black, 0.3em 0 0.3em rgba(0, 0, 0, 0.5);
    41.   top: calc(50% - 0.75em);
    42.   left: calc(50% - 0.75em);
    43.   width: 1.5em;
    44.   height: 1.5em;
    45. }
    46. .pl__dot, .pl__dot:before, .pl__dot:after {
    47.   animation-duration: 2s;
    48.   animation-iteration-count: infinite;
    49.   position: absolute;
    50. }
    51. .pl__dot:before, .pl__dot:after {
    52.   content: "";
    53.   display: block;
    54.   left: 0;
    55.   width: inherit;
    56.   transition: background-color var(--trans-dur);
    57. }
    58. .pl__dot:before {
    59.   animation-name: pushInOut1;
    60.   background-color: var(--bg);
    61.   border-radius: inherit;
    62.   box-shadow: 0.05em 0 0.1em rgba(255, 255, 255, 0.2) inset;
    63.   height: inherit;
    64.   z-index: 1;
    65. }
    66. .pl__dot:after {
    67.   animation-name: pushInOut2;
    68.   background-color: var(--primary1);
    69.   border-radius: 0.75em;
    70.   box-shadow: 0.1em 0.3em 0.2em rgba(255, 255, 255, 0.4) inset, 0 -0.4em 0.2em #2e3138 inset, 0 -1em 0.25em rgba(0, 0, 0, 0.3) inset;
    71.   bottom: 0;
    72.   clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
    73.   height: 3em;
    74.   transform: rotate(-45deg);
    75.   transform-origin: 50% 2.25em;
    76. }
    77. .pl__dot:nth-child(1) {
    78.   transform: rotate(0deg) translateX(5em) rotate(0deg);
    79.   z-index: 5;
    80. }
    81. .pl__dot:nth-child(1), .pl__dot:nth-child(1):before, .pl__dot:nth-child(1):after {
    82.   animation-delay: 0s;
    83. }
    84. .pl__dot:nth-child(2) {
    85.   transform: rotate(-30deg) translateX(5em) rotate(30deg);
    86.   z-index: 4;
    87. }
    88. .pl__dot:nth-child(2), .pl__dot:nth-child(2):before, .pl__dot:nth-child(2):after {
    89.   animation-delay: -0.1666666667s;
    90. }
    91. .pl__dot:nth-child(3) {
    92.   transform: rotate(-60deg) translateX(5em) rotate(60deg);
    93.   z-index: 3;
    94. }
    95. .pl__dot:nth-child(3), .pl__dot:nth-child(3):before, .pl__dot:nth-child(3):after {
    96.   animation-delay: -0.3333333333s;
    97. }
    98. .pl__dot:nth-child(4) {
    99.   transform: rotate(-90deg) translateX(5em) rotate(90deg);
    100.   z-index: 2;
    101. }
    102. .pl__dot:nth-child(4), .pl__dot:nth-child(4):before, .pl__dot:nth-child(4):after {
    103.   animation-delay: -0.5s;
    104. }
    105. .pl__dot:nth-child(5) {
    106.   transform: rotate(-120deg) translateX(5em) rotate(120deg);
    107.   z-index: 1;
    108. }
    109. .pl__dot:nth-child(5), .pl__dot:nth-child(5):before, .pl__dot:nth-child(5):after {
    110.   animation-delay: -0.6666666667s;
    111. }
    112. .pl__dot:nth-child(6) {
    113.   transform: rotate(-150deg) translateX(5em) rotate(150deg);
    114.   z-index: 1;
    115. }
    116. .pl__dot:nth-child(6), .pl__dot:nth-child(6):before, .pl__dot:nth-child(6):after {
    117.   animation-delay: -0.8333333333s;
    118. }
    119. .pl__dot:nth-child(7) {
    120.   transform: rotate(-180deg) translateX(5em) rotate(180deg);
    121.   z-index: 2;
    122. }
    123. .pl__dot:nth-child(7), .pl__dot:nth-child(7):before, .pl__dot:nth-child(7):after {
    124.   animation-delay: -1s;
    125. }
    126. .pl__dot:nth-child(8) {
    127.   transform: rotate(-210deg) translateX(5em) rotate(210deg);
    128.   z-index: 3;
    129. }
    130. .pl__dot:nth-child(8), .pl__dot:nth-child(8):before, .pl__dot:nth-child(8):after {
    131.   animation-delay: -1.1666666667s;
    132. }
    133. .pl__dot:nth-child(9) {
    134.   transform: rotate(-240deg) translateX(5em) rotate(240deg);
    135.   z-index: 4;
    136. }
    137. .pl__dot:nth-child(9), .pl__dot:nth-child(9):before, .pl__dot:nth-child(9):after {
    138.   animation-delay: -1.3333333333s;
    139. }
    140. .pl__dot:nth-child(10) {
    141.   transform: rotate(-270deg) translateX(5em) rotate(270deg);
    142.   z-index: 5;
    143. }
    144. .pl__dot:nth-child(10), .pl__dot:nth-child(10):before, .pl__dot:nth-child(10):after {
    145.   animation-delay: -1.5s;
    146. }
    147. .pl__dot:nth-child(11) {
    148.   transform: rotate(-300deg) translateX(5em) rotate(300deg);
    149.   z-index: 6;
    150. }
    151. .pl__dot:nth-child(11), .pl__dot:nth-child(11):before, .pl__dot:nth-child(11):after {
    152.   animation-delay: -1.6666666667s;
    153. }
    154. .pl__dot:nth-child(12) {
    155.   transform: rotate(-330deg) translateX(5em) rotate(330deg);
    156.   z-index: 6;
    157. }
    158. .pl__dot:nth-child(12), .pl__dot:nth-child(12):before, .pl__dot:nth-child(12):after {
    159.   animation-delay: -1.8333333333s;
    160. }
    161. .pl__text {
    162.   font-size: 0.75em;
    163.   max-width: 5rem;
    164.   position: relative;
    165.   text-shadow: 0 0 0.1em var(--fg-t);
    166.   transform: rotateZ(-45deg);
    167. }
    168.  
    169. /* Animations */
    170. @keyframes shadow {
    171.   from {
    172.     animation-timing-function: ease-in;
    173.     box-shadow: 0.1em 0.1em 0 0.1em black, 0.3em 0 0.3em rgba(0, 0, 0, 0.3);
    174.   }
    175.   25% {
    176.     animation-timing-function: ease-out;
    177.     box-shadow: 0.1em 0.1em 0 0.1em black, 0.8em 0 0.8em rgba(0, 0, 0, 0.5);
    178.   }
    179.   50%, to {
    180.     box-shadow: 0.1em 0.1em 0 0.1em black, 0.3em 0 0.3em rgba(0, 0, 0, 0.3);
    181.   }
    182. }
    183. @keyframes pushInOut1 {
    184.   from {
    185.     animation-timing-function: ease-in;
    186.     background-color: var(--bg);
    187.     transform: translate(0, 0);
    188.   }
    189.   25% {
    190.     animation-timing-function: ease-out;
    191.     background-color: var(--primary2);
    192.     transform: translate(-71%, -71%);
    193.   }
    194.   50%, to {
    195.     background-color: var(--bg);
    196.     transform: translate(0, 0);
    197.   }
    198. }
    199. @keyframes pushInOut2 {
    200.   from {
    201.     animation-timing-function: ease-in;
    202.     background-color: var(--bg);
    203.     clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
    204.   }
    205.   25% {
    206.     animation-timing-function: ease-out;
    207.     background-color: var(--primary1);
    208.     clip-path: polygon(0 25%, 100% 25%, 100% 100%, 0 100%);
    209.   }
    210.   50%, to {
    211.     background-color: var(--bg);
    212.     clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
    213.   }
    214. }

     

     

  • 相关阅读:
    android studio 常见问题
    # HTB-Tier2- Vaccine
    并发与并行,同步和异步,Go lang1.18入门精炼教程，由白丁入鸿儒，Go lang并发编程之GoroutineEP13
    2023 Google 开发者大会 – AI 领域的技术更新
    金仓数据库KingbaseES服务器应用参考手册--11. sys_upgrade
    对话祁隆《借我星光》作词人温暖：已获知和合国际收购信息
    vue中常用修饰符
    怎么使用股票委托下单接口？
    爬虫HTTP代理：获取多种类型数据的神器
    2024年经典【自动化面试题】附答案
  • 原文地址：https://blog.csdn.net/weixin_43340372/article/details/132832390