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

最新推荐文章于 2024-05-24 12:57:57 发布
最新推荐文章于 2024-05-24 12:57:57 发布
阅读量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
    评论
专栏目录
Animation动画效果的实现
chengcheng1986的专栏
11-29 1064
提供了三种动画效果：逐帧动画(frame-by-frame animation),这种动画和GIF一样，一帧一帧的显示来组成动画效果；布局动画（layout animation），这种动画用来设置layout内的所有UI控件；控件动画（view animation），这种是应用到具体某个view上的动画。   在这三种动画实现中逐帧动画是最简单的，而控件动画是有点复杂的，要涉及到线性代
用动画实现轮播效果（animation）
m0_61373758的博客
03-01 255
<style> .carousel { width: 520px; height: 280px; border: 3px solid #000; overflow: hidden; position: relative; margin: 50px auto; } .carousel ul { ..
MFC显示加载等待图标，显示gif动画.rar
04-25
VS2005完美运行。MFC实现显示GIF动画，解决类似不知道进度比例，需要等待的状态。很值得下载。 包内容： 1.Loading的系列gif动画集合； 2.显示GIF动画原理 3.显示GIF动画例子
加载loading动画
qq_40289557的博客
08-22 7836
提起加载（loading）效果，想必大家都不会陌生，在目前的移动端、PC端、各类app均广泛使用，使用loading动画能显著提升用户的交互体检，尤其是在页面加载速度比较的慢的情况下，loading动画的作用就更加突出了。实现一个个性化的加载动画效果，并不难，其主要原理是使用css3动画属性-animation、结合transform属性即可
Vue3项目中加载动画的实现
最新发布
fafafafa_fa的博客
05-24 740
正常路由的引入方式通常会导致网页首屏加载时间过长，给用户带来不好的体验，所以我们通常使用路由懒加载的方式来引入路由，这样只会在使用到某个路由时才会去加载它，减少了初次加载的时间。
前端页面加载Loading动画
pscool的博客
03-16 1939
在vue中，可以直接写在index.html的id为app的div里面，因为后面vue加载完成后，会替换掉里面的元素。
纯前端css实现酷炫loading动画
qq_45457134的博客
07-06 1366
纯前端css实现酷炫loading动画
css实现多个loading动画效果
温情
12-13 2710
在开发中，为了提高用户体验，通常在加载数据的时候会给一个。根据序号查看代码，尾部有整合代码。提示，这里分享几个简单的。
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）在网页设计中扮演着至...
【CSS加载动画特效】28种纯CSS实现的加载loading动态特效（附源码）
热门推荐
赏樱看雪撸代码
07-11 1万+
CSS3实现多种load加载效果，纯CSS3实现多种加载中效果，纯CSS3实现28种加载动态效果，页面实现loading效果，好看的loading动态特效，animation与transform的灵活应用。
10种 loading加载动画效果
qq_41988669的博客
01-29 1579
第一种 效果图： <template> <view class="load-box"> <view class="loading"></view> </view> </template> <script> export default { name: 'loading', data() { return {
使用loading动画让你的条件渲染页面更高级
知识虔诚的信徒，探索所有未知是信徒毕生的信仰
02-20 4006
如何让你的条件渲染和页面跳转更丝滑、更高级。也许只需添加一个loading动画就能做到！
用box与grid实现九宫格_CSS3 Grid布局实现Loading动画效果
weixin_39653622的博客
11-23 242
点击右上方红色按钮关注“web秀”，让你真正秀起来前言以前说页面是动态，基本都是说数据是从数据库查询的，不是写死在html代码里面的。现在的说页面动态，一般会问：你是说数据，还是效果动态？CSS3 Grid布局实现Loading动画效果好的前端动画效果，能给用户带来非常舒适的体验效果，更甚者，有用户觉的你这个动画效果非常nice，反复操作，就为看你这个动画。停留时间，预览量上了，带来的收益也不是一...
常用loading加载效果集及vue实现加载动画
pscool的博客
03-28 3482
思路：只需要先把loading的盒子摆在正中间，然后，里面的每个item都使用绝对定位，并且水平垂直居中，然后先旋转，再位移，就可以呈现一个环状，接着指定动画，并设置延迟即可。（其实，下边并不需要给loading指定大小，这样就不用设置上下左右都是0，margin是auto了） <style lang="scss"> body { margin: 0; } .modal { background: #202020; hei
animation 实现 loading 效果 (1)
神膘护体小月半的博客
07-11 386
animation 实现 loading 效果
css3实现loading点的加载动画
06-10
可以使用CSS3的伪元素和动画属性来实现loading点的加载动画，以下是一个简单的示例： HTML代码： ```html <div class="loading"> <div></div> <div></div> <div></div> </div> ``` CSS代码： ```css .loading { display: flex; justify-content: center; align-items: center; height: 100vh; } .loading div { width: 10px; height: 10px; margin: 0 5px; border-radius: 50%; background-color: #000; animation: loading 0.8s ease-in-out infinite; } .loading div:nth-child(2) { animation-delay: 0.2s; } .loading div:nth-child(3) { animation-delay: 0.4s; } @keyframes loading { 0% { transform: scale(0); } 50% { transform: scale(1); } 100% { transform: scale(0); } } ``` 解释一下： - 父元素 `.loading` 使用 flex 布局，居中子元素； - 子元素 `.loading div` 是三个小圆点，通过 `margin` 和 `border-radius` 等属性设置样式； - 使用 `animation` 属性定义动画，并通过 `animation-delay` 属性设置不同的延迟时间，让三个小圆点错开； - `@keyframes` 规则定义动画的关键帧，通过 `transform: scale()` 属性控制圆点的大小，实现点的出现和消失效果； - 最后，把三个小圆点放到一个父元素中，就可以实现loading点的加载动画了。 希望这个示例能够帮到你。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值