HTML+CSS3动感的环形加载效果

最新推荐文章于 2024-03-29 18:05:58 发布

HH______926

最新推荐文章于 2024-03-29 18:05:58 发布

阅读量731

点赞数 1

文章标签： css3 html css

本文链接：https://blog.csdn.net/HH______/article/details/127779280

版权

效果如下：

主要运用了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度旋转到360度，