原生js实现下滑到当前模块进度条填充

凉风听雪

于 2024-08-21 17:57:19 发布

阅读量983

点赞数 37

CC 4.0 BY-SA版权

分类专栏： CSS炫酷使用文章标签： javascript 开发语言 html css

本文链接：https://blog.youkuaiyun.com/p_s_p/article/details/141399781

<div style="height: 1500px;">

</div>
<div class="progress-container">
    <div class="progress-bar" data-progress="90%"><p class="progress-text">Google Ads在Google搜索引擎上覆盖超过90%的互联网用户。</p></div>
    <p class="progress-tag">90%</p>
    <div class="progress-bar" data-progress="60%"><p class="progress-text">超过2/3的潜在用户会被精准定位的Google Ads付费广告所吸引，点进进入。</p></div>
    <p class="progress-tag">2/3</p>
    <div class="progress-bar" data-progress="90%"><p class="progress-text">覆盖全球超过200万个网站和应用，可触及到网上90%的互联网用户。</p></div>
    <p class="progress-tag">200w+</p>
  </div>
  
  <style>
    .progress-container {
  margin: 50px 0;
}

.progress-bar {
  width: 80%;
  height: 80px;
  background-color: #ffffff;
  border-radius: 5px;
  /* overflow: hidden; */
  position: relative;
  margin-bottom: 20px;
  display: inline-block;
  margin-right: 30p