时间戳

首页 > 解决方案 > 如何为已经存在的技能栏设置动画

html - 如何为已经存在的技能栏设置动画

问题描述

我已经在我的页面上创建了一个技能栏，但我想知道是否有办法对其进行动画处理，以便当您滚动到该区域时，该栏会从无到有延伸到整个栏的长度。这是我的酒吧 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;
}

标签： htmlcss

解决方案

我假设您使用 Bootstrap 4。我将在此示例中使用 Bootstrap 进度组件。此代码段仅适用于进度条动画。您应该使用 javascript 来跟踪您的滚动位置以触发动画。如果您需要帮助，请告诉我

.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>

推荐阅读