纯css炫酷动态加载条

最新推荐文章于 2023-01-19 14:29:54 发布

KatyLight

最新推荐文章于 2023-01-19 14:29:54 发布

阅读量591

点赞数

分类专栏：样式文章标签： css3 前端 css

本文链接：https://blog.csdn.net/qq_33014695/article/details/122192262

版权

样式专栏收录该内容

32 篇文章 0 订阅

订阅专栏

这个博客分享了一段HTML和CSS代码，用于创建一个模仿Windows风格的动态加载条。加载条的颜色和宽度目前是固定的，作者提到没有使用calc()函数是因为它会导致宽度基于窗口而非父元素计算。文章中提供了关键的CSS动画帧来实现加载条的滚动效果。

摘要由CSDN通过智能技术生成

模仿windows风格的动态加载条，目前颜色更宽度是写死的，没有用clac的原因是因为它会跑得太原获取的100%是窗口宽度而不是父div宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pro{
            background-color: #000026;
            width: 100%;
            height: 80px;
            overflow: hidden;
            position: relative;
        }
        .pro>.cube {
            background-image: linear-gradient(to right,transparent, rgba(0, 255, 255, 0.8));
            width: 200px;
            height: 80px;
            position: absolute;
            top: 0;
        }
        .pro>.cube{
            animation: ani5 linear infinite forwards 2s;

        }

        .pro>.cube::before {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            content: '';
            width: 200px;
            height: 80px;
            background-image:
                    linear-gradient(to left,cyan,cyan 10%,transparent  10%,transparent ),
                    linear-gradient(to bottom,cyan,cyan 10%,transparent  10%,transparent );
            background-size: 10px 10px;
        }
        .pro>.cube::after   {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            content: '';
            width: 200px;
            height: 80px;
            background-image:        linear-gradient(to right,#000026,transparent );


        }

        @keyframes ani5 {
            0%{
                left:-200px;
            } 100%{
                  left: 600px;
              }

        }
    </style>
</head>
<body>
<div style="width: 600px;position: relative">
    <div class="pro">  <div class="cube"></div>
    </div>
</div>
</body>
</html>