开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

css动画加载图标代码

CSS 动画加载图标是一种使用 CSS 动画技术创建的视觉效果，通常用于指示页面或元素正在加载中。以下是一个简单的 CSS 动画加载图标的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 动画加载图标</title>
    <style>
        .loader {
            width: 50px;
            height: 50px;
            border: 5px solid #f3f3f3;
            border-top: 5px solid #3498db;
            border-radius: 50%;
            animation: spin 2s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="loader"></div>
</body>
</html>

基础概念

CSS 动画：CSS 动画是通过 CSS 属性变化来创建动画效果的技术。
@keyframes：用于定义动画的关键帧，指定动画从开始到结束的变化过程。
transform：用于改变元素的形状、位置或尺寸。
animation：用于应用动画效果，包括动画名称、持续时间、速度曲线和循环次数。

优势

轻量级：CSS 动画不需要额外的 JavaScript 文件，减少了页面加载时间。
性能好：CSS 动画由浏览器直接处理，通常比 JavaScript 动画更高效。
易于实现：CSS 动画的语法简单，易于学习和实现。

类型

旋转动画：如示例代码中的 spin 动画。
缩放动画：通过 transform: scale() 实现元素的缩放效果。
平移动画：通过 transform: translate() 实现元素的平移效果。
透明度动画：通过 opacity 属性实现元素的透明度变化。

应用场景

页面加载：在页面加载时显示加载图标，提升用户体验。
异步操作：在执行异步操作（如 AJAX 请求）时显示加载图标。
表单提交：在用户提交表单时显示加载图标，表示正在处理请求。

常见问题及解决方法

动画不生效：
- 确保 CSS 选择器正确。
- 确保 @keyframes 定义正确。
- 确保 animation 属性应用正确。
- 确保 animation 属性应用正确。

动画卡顿：
- 减少动画元素的复杂度。
- 使用 will-change 属性优化性能。
- 使用 will-change 属性优化性能。
兼容性问题：
- 使用 @-webkit-keyframes 和 -webkit-transform 等前缀支持旧版浏览器。
- 使用 @-webkit-keyframes 和 -webkit-transform 等前缀支持旧版浏览器。

通过以上方法，你可以创建一个简单且高效的 CSS 动画加载图标，并解决常见的动画问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

CSS 3.0实现加载动画

给大家分享一个用CSS 3.0实现加载动画，效果如下：以下是代码实现，欢迎大家复制、粘贴和收藏。 CSS...3.0实现加载动画 * { margin: 0; padding: 0; box-sizing: border-box;

6843 0

css实现页面加载动画

一.代码正在加载中

3.8K3 0

5分钟实现漂亮的CSS加载动画，纯CSS实现加载动画

filter(滤镜) 属性 2.6 CSS3动画(animation) 3 参考代码 3.1 HTML 3.2 CSS ---- 1 视频视频地址：https://www.bilibili.com/...2.6 CSS3动画(animation) 动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。...: 持续时间; } 动画序列 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果动画是使元素从一个样式逐渐变化为另一个样式的效果...3 参考代码 3.1 HTML 加载动画：公众号AlbertYang <link

2.3K1 0

加载动画效果 HTML+ CSS

加载动画效果写在前面在无限的时间的河流里,人生仅仅是微小又微小的波浪。...——郭小川实现效果实现原理通过2个伪元素来设置3条颜色边框通过定位将3个圆弧边框层叠再一起，再通过旋转实现一个圆的效果再给loading添加旋转动画即可要实现文字转动的效果，只需让其反向旋转即可...实现代码 HTML loading...... CSS @keyframes rotate { 100%{ transform: rotateZ(360deg); } } @keyframes...200px; text-align: center; line-height: 200px; animation: rotate_ni 2s linear infinite; } 完整代码

4.1K2 0

CSS实现最简洁的加载动画

纯CSS能实现的功能越来越多了，能用css实现的就别用js，今天教大家用最短的代码实现下面这个加载动画，这个加载动画的优势不仅是短小，而且不需要额外的dom元素就可实现，因此在那些异步加载的dom身上使用非常方便...因为这样的直角三角形中，斜边正好是短边的2倍，易于计算，其中短边就是一对条纹的厚度，斜边则是小矩形的宽度，同时还要将单条纹的厚度作为可变量w，那么黑白双条纹的厚度就是2w，小矩形的宽度和运动距离就是是4w，虽然用CSS...实现更简单，但是为了控制动画的生命周期，统一用JS来做吧： // 条纹厚度 const w = 3; // 加载动画的容器 const loading = document.getElementById...`repeating-linear-gradient(-30deg, white 0, white ${w}mm, black ${w}mm, black ${w * 2}mm)`; // 开始动画...animation.cancel(); 而且，可以根据原型图的要求调整样式，无论如何也不会超过20行CSS就能轻松实现，何必去使用那么大的第三方库呢？

1.2K2 0

CSS 3.0实现音阶加载中动画

给大家分享一个用CSS 3.0实现的音阶加载中的动画，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。 CSS...3.0实现音阶加载中动画 * { margin: 0; padding

9352 0

CSS 3.0实现模拟手机加载动画

给大家分享一个用CSS 3.0实现的模拟手机信各异的加载动画，效果如下：以下是代码实现，欢迎大家复制、粘贴和收藏。 CSS...3.0实现模拟手机加载动画 * { margin: 0; padding

8872 0

CSS 3.0实现时光轴加载动画

给大家分享一个用CSS 3.0实现时光轴加载动画，效果如下：以下是代码实现，欢迎大家复制、粘贴和收藏。 CSS 3.0实现时光轴加载动画

6063 0

css3简易的天气图标动画特效

sunny"> sun标签绘制圆环，rays及其伪类绘制射线，然后添加动画...这里绘制云，和《CSS3线性渐变、阴影、缩放实现动画下雨效果》一样的，都是用box-shadow阴影来制作的。...-0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2), -1.375em -0.125em 0 #0cf; } } 还有人记得《CSS3...如果你对box-shadow动画还不是很熟悉的，可以看这里《CSS3 box-shadow实现背景动画》多云多云，这个云前面已经制作了，接下来就非常的简单。...旋转动画和太阳旋转动画一样。

1.6K2 0

【CSS3】CSS3 动画 ① ( CSS3 动画简介 | CSS3 动画实现步骤 | 动画定义 | 代码示例 )

一、CSS3 动画简介 " 动画 " 是 CSS3 相较于 CSS 的颠覆性特性之一 ; 在 CSS3 中 , 可以设置多个动画节点 , 精确地控制一个动画或若干动画 , 实现复杂...的动效 ; 动画可以实现 : 过渡效果更多变化更多控制自动播放等效果 ; 二、CSS3 动画实现步骤 CSS3 动画实现步骤 : 首先 , 使用 @keyframes 定义动画 , 后面的..., 该动画将会在 1 秒内把将标签元素从右边 500px 位置移动到左边 0px 位置 ; 三、动画定义 ---- 动画定义语法 : @keyframes 动画名称中定义的是 CSS 样式..., 可以定义一个由当前初始状态样式逐渐变为终止状态样式的动画效果 ; @keyframes 动画名称 { 0% { 动画初始状态 } 100% { 动画终止状态 }...是任意多次 ; 四、代码示例 ---- 代码示例 : <!

2566 0

CSS 3.0实现文字跳动加载中动画

给大家分享一个用CSS 3.0实现的音阶加载中的动画，效果如下：以下是代码实现，欢迎大家复制粘贴和收藏。 CSS...3.0实现音阶加载中动画 * { margin: 0; padding

1.8K2 0

【动画消消乐】HTML+CSS 自定义加载动画 051

目前正在学习C++/Linux（真的真的太难了～）学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！...【动画消消乐】平时学习生活比较枯燥，无意之间对一些网页、应用程序的过渡/加载动画产生了浓厚的兴趣，想知道具体是如何实现的？...便在空闲的时候学习下如何使用css实现一些简单的动画效果，文章仅供作为自己的学习笔记，记录学习生活，争取理解动画的原理，多多“消灭”动画！效果展示 ? Demo代码 HTML css..."> Document CSS

3842 0

【动画消消乐】HTML+CSS 自定义加载动画 054

【动画消消乐】平时学习生活比较枯燥，无意之间对一些网页、应用程序的过渡/加载动画产生了浓厚的兴趣，想知道具体是如何实现的？...便在空闲的时候学习下如何使用css实现一些简单的动画效果，文章仅供作为自己的学习笔记，记录学习生活，争取理解动画的原理，多多“消灭”动画！效果展示 ? Demo代码 HTML css..."> Document CSS...步骤5 步骤4所设置的动画是为before和after同时设置的，二者的变化过程完全一致为了视觉上分离before和after 我们对after动画开始时间延迟（这样before和after就可以分开显示了

5043 0

【动画消消乐】HTML+CSS 自定义加载动画 057

【动画消消乐】平时学习生活比较枯燥，无意之间对一些网页、应用程序的过渡/加载动画产生了浓厚的兴趣，想知道具体是如何实现的？...便在空闲的时候学习下如何使用css实现一些简单的动画效果，文章仅供作为自己的学习笔记，记录学习生活，争取理解动画的原理，多多“消灭”动画！效果展示 ? Demo代码 HTML css..."> Document CSS...步骤2 为span添加动画先绕x轴翻转180度后绕y轴翻转180度 @keyframes loading { /*先x轴翻转180度后y轴翻转180度*/ 0% { transform

5785 0

【动画消消乐】HTML+CSS 自定义加载动画 056

【动画消消乐】平时学习生活比较枯燥，无意之间对一些网页、应用程序的过渡/加载动画产生了浓厚的兴趣，想知道具体是如何实现的？...便在空闲的时候学习下如何使用css实现一些简单的动画效果，文章仅供作为自己的学习笔记，记录学习生活，争取理解动画的原理，多多“消灭”动画！效果展示 ? Demo代码 HTML css..."> Document CSS...步骤3 再分离span::after 设置为宽度、高度均为56px 边框颜色：白色 /*代码放在before/after的后面这样才会对after进行重新设置*/ span::after {

7273 0

【动画消消乐】HTML+CSS 自定义加载动画 067

目前正在学习C++/Linux（真的真的太难了～）学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！...【动画消消乐】平时学习生活比较枯燥，无意之间对一些网页、应用程序的过渡/加载动画产生了浓厚的兴趣，想知道具体是如何实现的？...便在空闲的时候学习下如何使用css实现一些简单的动画效果，文章仅供作为自己的学习笔记，记录学习生活，争取理解动画的原理，多多“消灭”动画！效果展示 ? Demo代码 HTML css..."> Document CSS

8293 0

css3的attr函数使用，加载unicode图标

阿里矢量图标在项目中都用使用，通常一般我们引入css使用iconfont,或者我们使用svg加载图标，亦或我们可以使用Unicode，除了第一种与第二种，今天分享第三种方式unicode加载图标，希望看完在项目中能有所思考和帮助.../component/Search.vue引入一个图标所以加入了一行代码,就将删除图标就加入我们的页面中了 svg图标在这之前，我们都是用class方式加载，现在我们看下svg方式加载图标在src...我们注意到我们css加载图标实际上图标的一个伪类元素加载的一个unicode 加载图标实际上是引用了一个uncode，所以我们可以借鸡生蛋 css有一个超强的函数特性attr,在css里面我们可以动态的取到unicode的值我们看下css代码,注意unicode就是你标签上的那个属性 .maic-del { &::before {...渲染这整个标签，不然图标始终显示不出来）所以你会发现在css中你用attr这个属性就可以动态的加载标签上的unicode了 css的Attr 在以上我们的图标用unicode就可以加载图标，同时我们也知道利用

1.4K3 0

【动画消消乐】HTML+CSS 自定义加载动画 060

目前正在学习C++/Linux（真的真的太难了～）学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！...【动画消消乐】平时学习生活比较枯燥，无意之间对一些网页、应用程序的过渡/加载动画产生了浓厚的兴趣，想知道具体是如何实现的？...便在空闲的时候学习下如何使用css实现一些简单的动画效果，文章仅供作为自己的学习笔记，记录学习生活，争取理解动画的原理，多多“消灭”动画！效果展示 ? Demo代码 HTML Document CSS...综上动画代码为： animation: loading 2s linear infinite; @keyframes loading { 0% { transform: translate

5362 0

【动画消消乐】HTML+CSS 自定义加载动画 052

目前正在学习C++/Linux（真的真的太难了～）学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！...日常分享：微信公众号【海轰Pro】记录生活、学习点滴，欢迎关注～【动画消消乐】平时学习生活比较枯燥，无意之间对一些网页、应用程序的过渡/加载动画产生了浓厚的兴趣，想知道具体是如何实现的？...便在空闲的时候学习下如何使用css实现一些简单的动画效果，文章仅供作为自己的学习笔记，记录学习生活，争取理解动画的原理，多多“消灭”动画！效果展示 ? Demo代码 HTML css..."> Document CSS

4732 0

【动画消消乐】HTML+CSS 自定义加载动画 069

目前正在学习C++/Linux（真的真的太难了～）学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！...【动画消消乐】平时学习生活比较枯燥，无意之间对一些网页、应用程序的过渡/加载动画产生了浓厚的兴趣，想知道具体是如何实现的？...便在空闲的时候学习下如何使用css实现一些简单的动画效果，文章仅供作为自己的学习笔记，记录学习生活，争取理解动画的原理，多多“消灭”动画！效果展示 ? Demo代码 HTML Document CSS...步骤4 为span的三个阴影添加动画每个阴影动画过程其实都一致，只是初始位置不同这里以一个阴影的动画效果为例，其余同理可得阴影1动画关键有5帧简单描述为：从左移动到右，再回到左边位置关系上，y

4822 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭