两队PK进度条效果

最新推荐文章于 2024-09-29 17:25:09 发布

CamilleZJ

最新推荐文章于 2024-09-29 17:25:09 发布

阅读量3.4k

点赞数 4

分类专栏：前端文章标签： PK进度条效果

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/CamilleZJ/article/details/84587720

版权

前端专栏收录该内容

123 篇文章 2 订阅

订阅专栏

.pk-detail-con{width: 375px;text-align: center;color: #e3c898;font-size: .32rem;}
.progress, .progress-bar{position: relative;}
.progress{width: 100%;height: 38px;line-height: 38px;color: #f3eee1;letter-spacing: 1px;font-size:14px;overflow: hidden;z-index: 1;background-color: #db1d4e;border-radius: 19px;}
.progress-bar{height: 38px;text-align: left;background-color: #4c3de0;-moz-transition: width .6s ease;-webkit-transition: width .6s ease;transition: width .6s ease;}
.progress, .progress-bar{background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%);background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%);background-image: linear-gradient(rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%);}
.lightning, .team-name{position: absolute;}
.lightning{top: 0;right: -13px;width: 25px;height: 38px;background: url("img/pk-lightning.png") no-repeat center;background-size: cover;}
.team-name{top: 0;}
.team-l{left: 23px;}
.team-r{right: 23px;}
.vote-nums{line-height: 2;}
.vnums-l{float: left;margin-left: 23px;}
.vnums-r{float: right;margin-right: 23px;}

 <div class="pk-detail-con">
    <div class="progress" >
      <div class="progress-bar" style="width: 50%;">
        <i class="lightning"></i>
      </div>
      <span class="team-name team-l">蓝队</span>
    	<span class="team-name team-r">红队</span>
    </div>
    <span class="vote-nums vnums-l">5票</span>
    <span class="vote-nums vnums-r">5票</span>
  </div>

上面代码出现问题：

1..progress设置了border-radius即overflow: hidden，发现部分浏览器相出现子元素圆角超出部分未被隐藏，解决：添加z-index:1;

2.因为.progress使用了overflow: hidden，.progress, .progress-bar又都设置了定位position: relative，导致IOS手机蓝条遮盖红条部分未遮全，下方露出一小条红色。解决如下去掉.progress, .progress-bar的定位：

.pk-detail-con{position: relative;width: 375px;}
.progress{width: 100%;height: 38px;overflow: hidden;background-color: #db1d4e;border-radius: 19px;}
.progress-bar{height: 38px;text-align: left;background-color: #4c3de0;-moz-transition: width .6s ease;-webkit-transition: width .6s ease;transition: width .6s ease}
.progress, .progress-bar{background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%);background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%);background-image: linear-gradient(rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 50%);}
.lightning{width: 25px;height: 38px;float: right;margin-right: -12px;background: url("img/pk-lightning.png") no-repeat center;background-size: cover;}
.team-name{position: absolute;top: 0;line-height: 38px;color: #f3eee1;letter-spacing: 1px;font-size: 14px;}
.team-l{left: 23px;}
.team-r{right: 23px;}
.vote-nums{line-height: 2;color: #e3c898;font-size: 12px;}
.vnums-l{float: left;margin-left: 23px;}
.vnums-r{float: right;margin-right: 23px;}

<div class="pk-detail-con">
    <div class="progress" >
      <div class="progress-bar" style="width: 50%;">
        <i class="lightning"></i>
      </div>
    </div>
    <span class="team-name team-l">蓝队</span>
    <span class="team-name team-r">红队</span>
    <span class="vote-nums vnums-l">5票</span>
    <span class="vote-nums vnums-r">5票</span>
</div>