css如何实现进度条？？

最新推荐文章于 2024-01-02 17:22:05 发布

汐

最新推荐文章于 2024-01-02 17:22:05 发布

阅读量2k

点赞数

本文链接：https://blog.csdn.net/qq_41104279/article/details/89479897

版权

css 如何实现进度条
在生活中，我们不经意间就会看到很多的手机app上都会有带进度条，精简的软件会给我们视觉上的享受，那进度条是如何实现的呢？
首先，创建一个大小自定义的div模块为外层，其下再创建布局两个div左右布局，在这两个div下分别存在子div，html样式：

 <div class="box">
            <div class="circle left">
                <div class='circleleft' > </div>
            </div>
            <div class="circle right">
                <div class='circleright'></div>
            </div>
        </div>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
        box-sizing: border-box;
    }
    .box{
        width: 400px;
        height: 400px;
        border: 1px solid black;
        position: relative;

}
.circle{
    width: 200px;
    height: 400px;
    border: 1px solid transparent;
    position:absolute;
    overflow: hidden;
}
.left{
    left: 0;
}
.right{
right: 0;

}
.circleleft{
    width: 400px;
    height: 400px;
    border: 20px solid transparent;
    position:absolute;
    border-bottom:20px solid red;
    border-left:20px solid red ;
    border-radius: 50%;
    transform:rotate(45deg);
    animation: move1 5s infinite linear;

}
.circleright{
    
    width: 400px;
    height: 400px;
    border: 20px solid transparent;
     position:absolute;
    border-top:20px solid red;
border-right:20px solid red;
border-radius: 50%;
right:0; 
transform:rotate(45deg);
animation: move 5s infinite linear;
}
@keyframes move{
   0%{
    transform:rotate(45deg)

   }
   50%,100%{
    transform:rotate(225deg)
   }
}
@keyframes move1{
    0%,50%{
    transform:rotate(45deg)

   }
   100%{
    transform:rotate(225deg)
   } 
}
</style>

</head>
<body>
    <div class="box">
        <div class="circle left">
            <div class='circleleft' > </div>
        </div>
        <div class="circle right">
            <div class='circleright'></div>
        </div>
    </div>

</body>

汐

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css如何实现进度条？？

css 如何实现进度条在生活中，我们不经意间就会看到很多的手机app上都会有带进度条，精简的软件会给我们视觉上的享受，那进度条是如何实现的呢？首先，创建一个大小自定义的div模块为外层，其下再创建布局两个div左右布局，在这两个div下分别存在子div，html样式： <div class="box"> <div class="circle lef...
复制链接

扫一扫