动画效果和加载（Loading）动画的实现

最新推荐文章于 2024-06-20 13:18:10 发布
最新推荐文章于 2024-06-20 13:18:10 发布
阅读量1.3k 收藏 6
点赞数 2
分类专栏： # HTML/CSS 正在路上的前端攻城狮的烂笔记 文章标签： 动画 css3 html5 android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45660621/article/details/121086055
版权

多个图标动画特效

目录

首先通过@font-face加载字体文件。

先看效果在这里插入图片描述

思路清晰，先写六个div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多个图标动画特效</title>
</head>
<body>
    <div class="android icon">Android</div>
    <div class="app icon">Apple</div>
    <div class="page icon">Page</div>
    <div class="show icon">Show</div>
    <div class="victor icon">Victor</div>
</body>
</html>

然后在cssz中通过@font-face引入加载字体文件图标类文件
在这里插入图片描述

        @font-face {
            font-family: 'icon';
            src: url('font/icons.ttf');
        }

接下来通过字体16进制的unicode编码引入图标：

        .icon{
            display: inline-block;
            margin-right: 33px;
        }
        .android::before{
        content: "\e65f";
        font-size: 66px;
        font-family: 'icon';
        }
        .app::before{
            content: "\e660";
            font-size: 66px;
            font-family: 'icon';
        }
        .page::before{
            content: "\e64d";
            font-size: 66px;
            font-family: 'icon';
        }
        .show::before{
            content: "\e647";
            font-size: 66px;
            font-family: 'icon';
        }
        .victor::before{
            content: "\e648";
            font-size: 66px;
            font-family: 'icon';
        }

效果为：
在这里插入图片描述
为每个div添加样式

        .icon{
            display: inline-block;
            cursor: help; /*当鼠标放在图标上面鼠标的样式*/
            width: 111px;
            height: 111px;
            font-size: 0px;
            line-height: 100px;
            border-radius: 50%;  /*圆框*/
            background:#000;
            color: white;
            text-align: center;
            animation:move 1s; /*引入下面的动画，时间为1s*/
        }

效果为：
在这里插入图片描述
完善动画：

     @keyframes move{
            from{
                opacity: 0;
                transform: translateY(100%);
            }
            to{
                opacity: 1;
                transform: translateY(0%);
            }
        }

效果为：
在这里插入图片描述
整齐一下全部的出现，总感觉差了一点东西；通过使用animation-delay属性给不同的图标设置延迟：

		.android{
            animation-delay: 0s;
        }
        .app{
            animation-delay: .3s;
        }
        .page{
            animation-delay: .6s;
        }
        .show{
            animation-delay: 1.2s;
        }
        .victor{
            animation-delay: 1.5s;
        }

效果为
在这里插入图片描述

光这样还不够，通过设置贝塞尔（cubic-bezier）速度曲线来改变图标的移动速率。
在类.icon里面添加以下属性。

        .icon{
            animation-fill-mode: both;/*设置图标开始和结束的效果可见，防止图标闪现*/
            animation: move 2s cubic-bezier(.86,.15,.18,.9);
        }

效果为:
在这里插入图片描述

加载（Loading）动画 - 0.0

先看效果
在这里插入图片描述
先把上面的图分解一个不停旋转的圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加载（Loading）动画 - 0.0</title>
    <style type="text/css">
        body {
            background: #6FE;
            margin: 100px;
        }
        .load {
            text-indent: -9999px;/*把文字干飞*/
            position: relative;
            width: 202px;
            height: 202px;
            box-shadow: inset 0 0 0 16px #fff;/*设置内阴影*/
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="load">Loading</div>
</body>
</html>

效果为：
在这里插入图片描述

用text-indent: -9999px;来隐藏文字，利用box-shadow来生成白色圆圈，优点是不会打乱div内部结构，利用border元素会引起元素的偏移。
通过伪元素::before给圆圈添加一个旋转矩形来遮挡半圆，达到视觉效果差，让人感觉是圆在旋转。

        .load::before{
            position: absolute;
            content: '';
            width: 101px;
            height: 202px;
            background: pink;
            left: 101px;
        }

效果
在这里插入图片描述
然后修改为圆形，跟背景色一样，就是变成半圆了。

border-radius: 0 202px 202px 0;

在这里插入图片描述
接下来修改半圆颜色为背景色

.load::before{
	background: #6FE;
}

效果为：
在这里插入图片描述
接下来通过伪元素选择器::after添加一个更浅色的轨迹图，用白色调整透明度就行。

        .load::after{
            position: absolute;
            content: '';
            width: 202px;
            height: 202px;
            border-radius: 50%;
            left: 0;
            box-shadow: inset 0 0 0 15px rgba(255,255,255,.3);
        }

效果为：
在这里插入图片描述
接下来制作动画让遮挡图旋转起来

        @keyframes load-effect {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        .load::before{
            animation: load-effect 2s infinite; /*动画无限循坏*/
            transform-origin: 0px 101px;  /*设置旋转的点为圆心处*/
        }

效果为：
在这里插入图片描述

“拖尾”Loading动画 - 1.0

先看效果：
在这里插入图片描述

这个主要利用linear-gradient线性渐变来设置的。html框架和上面的一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度条</title>
    <style type="text/css">
        body{
            background: #000;
            margin: 100px;
        }
        .load{  }
        .load::before{ }

        .load::after{ }
    </style>
</head>
<body>
    <div class="load">Loading</div>
</body>

通过上面的渐变属性修改之前圆圈的的背景

.load{
        text-indent: -9999px;
        position: relative;
        width: 202px;
        height: 202px;
        box-shadow: inset 0 0 0 20px rgba(255,255,255,.3);
        border-radius: 50%;
        background: linear-gradient(to left,#fff 11%,rgba(255,255,255,0)50%);
    }

效果为:
在这里插入图片描述接下来给圆添加一个1/4的半圆遮挡板

  .load::before{ 
            position: absolute;
            content: '';
            width: 50%;
            height: 50%;
            border-radius: 0 0 101px 0;
            right: 0px;
            bottom: 0px;
            background-color: #fff;
        }

在这里插入图片描述
接下来往里面添加after伪元素，绘制一个内部实心圆，将其他细节覆盖掉。

        .load::after{
            position: absolute;
            background-color: #000;
            width: 162px;
            height: 162px;
            content: '';
            border-radius: 50%;
            top:20px;
            left: 20px;
         }

在这里插入图片描述
添加动画

        @keyframes load-effect {
            0%{
                transform: rotate(0deg);
            }
            100%{
                transform:rotate(360deg);
            }
        }
        .load{
            animation: load-effect 2s infinite linear;
        }

效果为：
在这里插入图片描述

三点唤醒Loading动画 - 2.0

话不多说，先看效果：
在这里插入图片描述

通过box-shadow属性制作三个不同大小的圆
注：1em = 16px。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3帧动画</title>
    <style type="text/css">
        body{
            background: #000;
        }
        .load{
            font-size: 33px;
            width: 1em;
            height: 1em;
            border-radius: 50%;
            position: relative;
            text-indent: -8888em;
            box-shadow: 
            3em 2em 0 1.3em #FFF,
            7em 2em 0 1em #FFF,
            10em 2em 0 0.5em #FFF,
            12em 2em 0 0em #FFF;
            /* 设置四个不同半径圆的大小和距离 */
        }
    </style>
</head>
<body>
    <div class="load">1900's 88 keys</div>
</body>
</html>

效果为;
在这里插入图片描述
直接添加动画

   <style type="text/css">
        body{
            background: #000;
        }
        .load{
            font-size: 33px;
            width: 1em;
            height: 1em;
            border-radius: 50%;
            position: relative;
            text-indent: -8888em;
            /* box-shadow: 3em 2em 0 1.3em #FFF,7em 2em 0 1em #FFF,10em 2em 0 0.5em #FFF,12em 2em 0 0em #FFF; */
            /* 三个不同圆的大小和距离 */
            animation: load-effect 0.99s infinite linear;
        }
        /* 设置动画 */
        @keyframes load-effect {
            0%{
                box-shadow: 
                3em 2em 0 1em #FCC,
                6em 2em 0 0.5em #9F9,
                9em 2em 0 0 #CCF,
                12em 2em 0 -0.5em #F7F;
            }
            25%{
                box-shadow: 
                3em 2em 0 0.5em #FCC,
                6em 2em 0 0 #9F9,
                9em 2em 0 -0.5em #CCF,
                12em 2em 0 1em #F7F;
            }
            50%{
                box-shadow: 
                3em 2em 0 0 #FCC,
                6em 2em 0 -0.5em #9F9,
                9em 2em 0 1em #CCF,
                12em 2em 0 0.5em #F7F;
            }
            75%{
                box-shadow: 
                3em 2em 0 -0.5em #FCC,
                6em 2em 0 1em #9F9,
                9em 2em 0 0.5em #CCF,
                12em 2em 0 0 #F7F;
            }
            100%{
                box-shadow: 
                3em 2em 0 1em #FCC,
                6em 2em 0 0.5em #9F9,
                9em 2em 0 0 #CCF,
                12em 2em 0 -0.5em #F7F;
            }
        }

 </style>

效果为在这里插入图片描述
同一行，不同列的大小变化都遵循：->1->0.5em->0->-0.5em->，负数消失。

多点Loading特效【终极版】 - 3.0

话不多说，先看效果：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆阵</title>
    <style type="text/css">
        body{
           background: #AFE;
            margin: 200px;
        }
        .load{
            font-size: 33px;
            width: 1em;
            height: 1em;
            border-radius: 50%;
            text-indent: -8888em;

            animation: load-effect .9s infinite linear;
        }

        @keyframes load-effect {
            0%,
            100% {
                box-shadow: 
                0 -3em 0 .2em #FCC,
                2em -2em 0 0 #FFB7DD, 
                3em 0 0 -.5em #FF88C2, 
                2em 2em 0 -.5em #F4A, 
                0 3em 0 -.5em #F08, 
                -2em 2em 0 -.5em #C10066, 
                -3em 0 0 -.5em #A20055, 
                -2em -2em 0 0 #8C0044;
            }
            12.5% {
                box-shadow: 
                0 -3em 0 0 #FCC, 
                2em -2em 0 .2em #FFB7DD, 
                3em 0 0 0 #FF88C2, 
                2em 2em 0 -.5em #F4A, 
                0 3em 0 -.5em #F08, 
                -2em 2em 0 -.5em #C10066, 
                -3em 0 0 -.5em #A20055, 
                -2em -2em 0 -.5em #8C0044;
            }
            25% {
                box-shadow: 
                0 -3em 0 -.5em #FCC, 
                2em -2em 0 0 #FFB7DD, 
                3em 0 0 .2em #FF88C2, 
                2em 2em 0 0 #F4A, 
                0 3em 0 -.5em #F08, 
                -2em 2em 0 -.5em #C10066, 
                -3em 0 0 -.5em #A20055, 
                -2em -2em 0 -.5em #8C0044;
            }
            37.5% {
                box-shadow: 
                0 -3em 0 -.5em #FCC, 
                2em -2em 0 -.5em #FFB7DD, 
                3em 0 0 0 #FF88C2, 
                2em 2em 0 .2em #F4A, 
                0 3em 0 0 #F08, 
                -2em 2em 0 -.5em #C10066, 
                -3em 0 0 -.5em #A20055, 
                -2em -2em 0 -.5em #8C0044;
            }
            50% {
                box-shadow: 
                0 -3em 0 -.5em #FCC, 
                2em -2em 0 -.5em #FFB7DD, 
                3em 0 0 -.5em #FF88C2, 
                2em 2em 0 0 #F4A, 
                0 3em 0 .2em #F08, 
                -2em 2em 0 0 #C10066, 
                -3em 0 0 -.5em #A20055, 
                -2em -2em 0 -.5em #8C0044;
            }
            62.5% {
                box-shadow: 
                0 -3em 0 -.5em #FCC, 
                2em -2em 0 -.5em #FFB7DD, 
                3em 0 0 -.5em #FF88C2, 
                2em 2em 0 -.5em #F4A, 
                0 3em 0 0 #F08, 
                -2em 2em 0 .2em #C10066, 
                -3em 0 0 0 #A20055, 
                -2em -2em 0 -.5em #8C0044;
            }
            75% {
                box-shadow: 
                0 -3em 0 -.5em #FCC, 
                2em -2em 0 -.5em #FFB7DD, 
                3em 0 0 -.5em #FF88C2, 
                2em 2em 0 -.5em #F4A, 
                0 3em 0 -.5em #F08, 
                -2em 2em 0 0 #C10066, 
                -3em 0 0 .2em #A20055, 
                -2em -2em 0 0 #8C0044;
            }
            87.5% {
                box-shadow: 
                0 -3em 0 0 #FCC, 
                2em -2em 0 -.5em #FFB7DD, 
                3em 0 0 -.5em #FF88C2, 
                2em 2em 0 -.5em #F4A, 
                0 3em 0 -.5em #F08, 
                -2em 2em 0 0 #C10066, 
                -3em 0 0 0 #A20055, 
                -2em -2em 0 .2em #8C0044;
            }
        }
    </style>
</head>
<body>
    <div class="load">1900's 88 keys</div>
</body>
</html>
1900's 88 keys
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript实现页面加载loading动画(附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-05 1056
javascript实现页面加载loading动画(附完整源码)
前端页面加载Loading动画
pscool的博客
03-16 1940
在vue中，可以直接写在index.html的id为app的div里面，因为后面vue加载完成后，会替换掉里面的元素。
10种 loading加载动画效果
qq_41988669的博客
01-29 1584
第一种 效果图： <template> <view class="load-box"> <view class="loading"></view> </view> </template> <script> export default { name: 'loading', data() { return {
纯 CSS 实现十个不错的 Loading 效果！
最新发布
zz_jesse的博客
06-20 170
作者：Jimmyhttps://juejin.cn/post/7080542771387301896在推特上面看到 T. Afif[1] 介绍的十个 Loading 效果。如上图。Yeah，很赞哦，挺实用的，遂记录下来。为保证运行正常，咱先规定下：*{ box-sizing:border-box; }1. 平滑加载<divclass="progress-1"></div...
常用loading加载效果集及vue实现加载动画
pscool的博客
03-28 3494
思路：只需要先把loading的盒子摆在正中间，然后，里面的每个item都使用绝对定位，并且水平垂直居中，然后先旋转，再位移，就可以呈现一个环状，接着指定动画，并设置延迟即可。（其实，下边并不需要给loading指定大小，这样就不用设置上下左右都是0，margin是auto了） <style lang="scss"> body { margin: 0; } .modal { background: #202020; hei
android动画介绍--Animation 实现loading动画效果
weixin_30357231的博客
07-28 363
Animation的使用方法并不难。这里简单的介绍一下使用方法。 先看效果图： 效果还是不错的吧。 下面来看看使用方法。 动画效果是通过Animation来实现的，一共有四种，分别为： AlphaAnimation : 渐变透明度动画 ScaleAnimation: 尺寸渐变动画 TranslateAnimation: 水平移动动画 RotateAnimation:...
css3实现加载loading特效小动画效果
06-12
总结来说，CSS3加载loading特效小动画效果是通过结合关键帧动画、变换（transform）、过渡（transition）以及颜色和背景的动态变化来实现的。这些技术的运用让网页加载不再枯燥，而是成为了一种视觉享受。在实际开发...
Android自定义View实现loading动画加载效果
08-31
XML布局文件（loading_view_layout.xml）定义了一个包含ImageView和TextView的LinearLayout，用于显示loading动画和文字信息。背景颜色可以通过属性设置来改变，使得loading视图能够与应用的其他元素更好地融合。 ...
loading加载gif动画
01-02
4. **设计原则**：一个优秀的loading动画应简洁、直观，与品牌形象和用户体验保持一致。颜色选择、大小、速度和样式都需精心设计，避免干扰用户视线，同时传达出进度信息。 5. **性能优化**：由于GIF文件可能会比较...
使用css3实现超炫的loading加载动画效果
09-25
总结起来，使用CSS3实现超炫的loading加载动画效果，开发者可以通过创建自定义的关键帧动画和利用变换属性来实现各种动态效果。这不仅可以提升网站或应用的视觉吸引力，还能为用户提供反馈，让他们知道内容正在加载...
Bootstrap网页loading加载图标动画特效
06-11
在这个特定的资源中，我们关注的是"Bootstrap网页loading加载图标动画特效"，这是一种利用Bootstrap框架和CSS3技术来创建吸引用户注意力的加载指示器的方法。 首先，加载图标（Loading Icon）在网页设计中扮演着至...
使用Animation-list实现等待加载动画效果
01-04
使用Animation-list实现等待加载动画效果,简单demo,适合新手学习使用Animation-list
WPF：Loading等待动画、加载动画
热门推荐
pandawangyt的博客
08-21 1万+
类型1 效果 思路： 1、用8个浅灰色的圆当背景 2、4个渐变深灰色的圆，一直改变其旋转角度，表示Loading的过程 首先，定位下图圆的位置（红色线为辅助线），剩余的直接旋转角度就行。 画布长宽为100 <Canvas Width="100" Height="100"> 圆的半径是25，设计其基础的样式。因为剩余的圆是通过该圆旋转得到的，旋转的中心是上图中几条红色直线相交的那个点，不难算出RenderTransformOrigin为0.5,2，这个很关键。 <Style x:K
CSS3 实现 Loading 动画
Hwaphon
09-10 6681
最近本人正在极客学院学习 HTML5 系列课程，这么课程涵盖的内容也是非常的多，虽然内容十分简单容易理解，但是非常难以记忆，比如 CSS3 的一些属性。今天所要介绍的 CSS3 Loading 动画也是极客学院里所介绍的内容，感兴趣的同学也可以前去观看视屏。 Loading one第一种加载动画的效果，就是这么一个图在不停的转啊转，动态图就不在这里展示了，太过于麻烦了，想看效果的同学学习之后可以自己
loading 动画效果
LWLCEO的博客
09-17 440
html 部分 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"
css加载动画（水滴效果）
qq_25294327的博客
06-16 429
原理是先blur模糊处理，让物体边界重叠，再提高对比度，这样模糊边界就会变清晰。直接用filter自带的属性也可以实现，但调用svg滤镜效果会更好。最终实现效果视频可以看我Dou音，DY号：G_console。
手把手实现 CSS 加载动画（一）
p1967914901的博客
08-07 4450
接下来便是旋转这三个圆，最方便的做法便是将容器进行旋转，但有一个地方需要注意，我们是要等三个圆移动到最远的位置后开始旋转。既然是加载动画，我们不可能让他在角落展示吧，我们当然需要将它水平垂直居中，水平垂直居中的方式有很多，这里就不再赘述了。现在你已经看到了三个黑乎乎的圆已经重合在容器中间（为了方便观察，我们给容器加了一个背景颜色）。好了，到现在我们已经完成了初始状态，接下来我们要为它们分别定义动画。接下来我们来绘制三个圆，首先一开始三个圆是在容器中间。，这就是动画开始时一个圆分裂成三个圆的停顿时刻；...
页面加载动画的实现
weixin_44483523的博客
08-10 588
最近做一个项目遇到了一个问题，就是每次页面跳转有时候会很慢，会出现白屏，或者跳转完毕了但是资源没有完全加载完毕，导致用户体验很差.中间那个蓝色图片会转圈圈，具体图片可以自行调整。等页面内容加载完毕即可。这样一来无论你的屏幕多大多高，这个加载都会全屏占据你的屏幕。最后最简单得方法（记得先引入jQuery.js）1 . 自己先写一个加载动画。.........
十六种炫酷纯css加载动画（一）
孟繁胜游的博客
12-12 7472
一个好的开篇，会给你这个项目增加不少分值。 有没有遇到过打开页面加载一段时间，页面内容才加载出来。在等待加载的过程中页面却是空白页，给用户的体验特别不好，会让项目降一个档次。下面的十六种炫酷炸裂的css加载动画，会让你在等待的过程中，体验视觉盛宴，给用户不一般的加载体验，对，就是纯css3的炫酷加载动画，请看效果！ 码字不易，且行且珍惜。 加载1 css源码 .title{ width:...
css3实现loading点的加载动画
06-10
可以使用CSS3的伪元素和动画属性来实现loading点的加载动画，以下是一个简单的示例： HTML代码： ```html <div class="loading"> <div></div> <div></div> <div></div> ``` CSS代码： ```css .loading { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值