CSS实现加载动画

SwJieJie

于 2024-07-16 15:32:05 发布

阅读量451

点赞数 8

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_44552416/article/details/140467278

版权

需求：在开发过程中，我们会经常遇到一些基本的加载动画需求。这里我们简单介绍几个加载动画，主要是通过使用css的animation和transition的属性进行实现的动画和过渡效果。

语法：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

在这里插入图片描述

1- 示例一如下

进度条转圈圈的加载动画
在这里插入图片描述
代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading2</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
        }

        .rotate-loading {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            border: 6px solid rgba(200, 200, 200, 0.5);
            border-top: 6px solid black;
            animation: rotate-loading 1s linear infinite;
        }

        @keyframes rotate-loading {
            0% {
                transform: rotate(0deg);
            }

            100% {
                /* 顺时针旋转360度 */
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="rotate-loading"></div>
</body>

</html>

2- 示例二如下

loading跳动的加载动画
在这里插入图片描述
代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading3</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            height: 100vh;
        }

        .wave-loading {
            width: 400px;
            height: 100px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .wave-loading span {
            display: inline-block;
            font-size: 30px;
            font-weight: bold;
            font-family: 'Courier New', Courier, monospace;
            animation: wave-loading 1s ease-in-out infinite;
            animation-delay: calc(0.1s * var(--time));
        }

        @keyframes wave-loading {
            0% {
                transform: translateY(0px);
            }

            25% {
                transform: translateY(-20px);
            }

            50%,100% {
                transform: translateY(0px);
            }
        }
    </style>
</head>

<body>
    <div class="wave-loading">
        <span style="--time:1">l</span>
        <span style="--time:2">o</span>
        <span style="--time:3">a</span>
        <span style="--time:4">d</span>
        <span style="--time:5">i</span>
        <span style="--time:6">n</span>
        <span style="--time:7">g</span>
        <span style="--time:8">.</span>
        <span style="--time:9">.</span>
        <span style="--time:10">.</span>
    </div>
</body>

</html>

3- 示例三如下

3个圆点加载动画
在这里插入图片描述

代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading3</title>
    <style type="text/css">
		 .loadding-box {
			   display: flex;
			 
			    .dot1,
			    .dot2,
			    .dot3 {
			       width: 8px;
			       height: 8px;
			       border-radius: 50%;
			       margin-left: 6px;
			     }
			 
			    .dot1 {
			       animation: jump 1.2s -0.4s linear infinite;
			       background: #8c8ef7;
			     }
			 
			    .dot2 {
			       animation: jump 1.2s -0.2s linear infinite;
			       background: #5e85d1;
			     }
			 
			    .dot3 {
			       animation: jump 1.2s linear infinite;
			       background: #2e6de7;
			     }
			 
			    @keyframes jump {
			 
			      0%,
			      80%,
			      100% {
			        transform: scale(0.9);
			        opacity: 1.0;
			      }
			 
			      40% {
			        transform: scale(1.1);
			        opacity: 0.8;
			      }
			    }
			  }
    </style>
</head>

<body>
    <div class="loadding-box">
	     <div class="dot1"></div>
	     <div class="dot2"></div>
	     <div class="dot3"></div>
	</div>
</body>

</html>