首页 前端知识 HTML CSS3动感的环形加载效果

HTML CSS3动感的环形加载效果

2024-08-21 10:08:18 前端知识 前端哥 153 316 我要收藏

效果如下:

 

主要运用了HTML CSS3

首先先写内容:

<!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>动感的环形加载效果</title>
</head>
<body>
        <!-- 最外边的圆形 -->
        <div class="loader"></div>
        <div class="text">Loading...</div>
</body>
</html>

然后利用CSS中的伪元素来创造其他两个圆;

用定位把伪元素框在div中,实现看到三个环形圆的效果;

此时只需要看到上边框的部分,将其他部分边框设成透明,上边框设有颜色即可;

设置动画,从0度旋转到3

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16301.html
标签
评论
发布的文章

在线OJ项目

2024-08-27 21:08:43

JSON2YOLO 项目教程

2024-08-27 21:08:42

Redis 实现哨兵模式

2024-08-27 21:08:22

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!