141.如何使用图标做一个加载特效

@大迁世界

于 2021-03-04 08:56:50 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS创意特效(第三季)

本文链接：https://blog.csdn.net/qq449245884/article/details/114356839

CSS创意特效(第三季) 专栏收录该内容

125 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了一种使用Vue组件实现的图标加载特效，并提供了源码下载。作者鼓励读者参与完善组件，并希望获得支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果 (源码网盘地址在最后)

最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。

源码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>141.如果使用图标做一个加载特效</title>
  <link href="./style.css" rel="stylesheet">
  <link href="https://at.alicdn.com/t/font_2159878_r6ah59c8w7g.css" rel="stylesheet">
</head>
<body>
  <div class="loader">
    <span style="--i:1"></span>
    <span style="--i:2;"></span>
    <spa