环绕倒影加载特效 html+css

HTML+CSS实现炫酷加载动画

最新推荐文章于 2024-03-31 00:51:46 发布

原创

最新推荐文章于 2024-03-31 00:51:46 发布 · 3.7k 阅读

32 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3

本文通过HTML和CSS代码实现了一个居中显示的加载动画，包括一个旋转的圆形底座，带有渐变蓝色环和发光小球的细节，以及文字阴影效果。文章详细解释了每个部分的样式和动画原理，适合前端开发者学习参考。

先看效果（完整代码在底部）：

在这里插入图片描述

实现（可一步一步边看效果边编写）：

※先初始化（直接复制）：

 *{
   
   
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
 body{
   
   
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(7, 15, 26);
        }

flex布局，让子元素居中对齐。

1.定义标签：

<div class="container">
        <span>Loading...</span>
        <div class="circle">
            <div class="ring"></div>
        </div>
    </div>

.container是最底层盒子。
span是文本。
.circle是底层圆形盒子。
.ring是那个蓝色环。

2. .container的css样式：

.container{
   
   
            position: relative;
            height: 150px;
            width: 250px;
            -webkit-box-reflect:below 1px linear-gradient(transparent  ,rgb(7, 15, 26));
        }

-webkit-box-reflect：该属性能实现倒影特效。详细。

3. .circle的css样式，动画部分可暂时注释掉：

.circle{
   
   
            position: relative;
            margin: 0 auto;
            height: 150px;
            width: 150px;
            background-color: rgb(13, 10, 37);
            border-radius: 50%;
            animation: zhuan 2s linear infinite;
        }
        @keyframes zhuan{
   
   
            0%{
   
    
               
                transform: rotate(0deg);
            }
            100%{