Question

我已经在页面上创建了一个技能栏，但是我想知道是否有一种方法可以对其进行动画处理，这样当您滚动到该区域时，该栏会从没有延伸到整个栏的长度。这是我的HTML栏：

    <div id="skills_skill">
      <div class="col-xs-12 col-md-4" id='skills_text'>
        Example Skill
      </div>
      <div class="col-xs-12 col-md-8" id='skills_container'>
        <div class="skills example">90%</div>
      </div>
    </div>

这是CSS：

#skills_text {
  font-weight: bold;
  border-right: 1px solid white;
}

.skills {
  text-align: right;
  padding-right: 20px;
  line-height: 20px;
  color: black;
  border-radius: 20px;
}

.example {
  width: 90%;
  background-color: white;
}

Answer 1

I assume you use Bootstrap 4. I will use Bootstrap progress component for this example. This snippet code only for the progress bar animation. You should use javascript to keep track of your scroll position to trigger the animation. Please let me know if you need help

.progress-bar {
  animation: progress 300ms ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes progress {
  0% {
    width: 0;
  }
  
  100% {
    width: 100%;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-  valuenow="25" aria-valuemin="0" aria-valuemax="100"> </div>
</div>

如何为现有的技能栏制作动画

1 个答案: