Блог

Главная - Вопросы по программированию - Анимация не работает для панели навыков в HTML / CSS

Анимация не работает для панели навыков в HTML / CSS

#javascript #html #css #web-deployment

#JavaScript #HTML #css #веб-развертывание

Вопрос:

Я пытаюсь включить панель навыков на свою веб-страницу, но по какой-то причине я не получаю эффект анимации. Я попытался скопировать код для панели навыков на другую платформу для запуска, и это работает нормально, но когда я копирую и вставляю свой код в свой проект, анимация не работает.

МОЙ HTML / CSS

 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700amp;display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

html,
body {
  height: 100%;
  place-items: center;
  background: transparent;
}

::selection {
  color: #fff;
  background: black;
}

.skill-bars {
  padding: 25px 30px;
  width: 615px;
  background: #fff;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.skill-bars .bar {
  margin: 20px 0;
}

.skill-bars .bar:first-child {
  margin-top: 0px;
}

.skill-bars .bar .info {
  margin-bottom: 5px;
}

.skill-bars .bar .info span {
  font-weight: 500;
  font-size: 17px;
  opacity: 0;
  animation: showText 0.5s 1s linear forwards;
}

@keyframes showText {
  100% {
    opacity: 1;
  }
}

.skill-bars .bar .progress-line {
  height: 10px;
  width: 100%;
  background: #f0f0f0;
  position: relative;
  transform: scaleX(0);
  transform-origin: left;
  border-radius: 10px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.8);
  animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}

@keyframes animate {
  100% {
    transform: scaleX(1);
  }
}

.bar .progress-line span {
  height: 100%;
  position: absolute;
  border-radius: 10px;
  transform: scaleX(0);
  transform-origin: left;
  background: black;
  animation: animate 1s 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}

.bar .progress-line.html span {
  width: 90%;
}

.bar .progress-line.css span {
  width: 60%;
}

.bar .progress-line.jquery span {
  width: 85%;
}

.bar .progress-line.python span {
  width: 50%;
}

.bar .progress-line.mysql span {
  width: 75%;
}

.progress-line span::before {
  position: absolute;
  content: "";
  top: -10px;
  right: 0;
  height: 0;
  width: 0;
  border: 7px solid transparent;
  border-bottom-width: 0px;
  border-right-width: 0px;
  border-top-color: #000;
  opacity: 0;
  animation: showText2 0.5s 1.5s linear forwards;
}

.progress-line span::after {
  position: absolute;
  top: -28px;
  right: 0;
  font-weight: 500;
  background: #000;
  color: #fff;
  padding: 1px 8px;
  font-size: 12px;
  border-radius: 3px;
  opacity: 0;
  animation: showText2 0.5s 1.5s linear forwards;
}

@keyframes showText2 {
  100% {
    opacity: 1;
  }
}

.progress-line.html span::after {
  content: "90%";
}

.progress-line.css span::after {
  content: "60%";
}

.progress-line.jquery span::after {
  content: "85%";
}

.progress-line.python span::after {
  content: "50%";
}

.progress-line.mysql span::after {
  content: "75%";
} 
 <section>
  <div class="container" data-aos="fade-up">
    <div class="section-title">
      <h2>What I am Working On</h2>
    </div>


    <link rel="stylesheet" href="assets/css/skills.css">
    <div class="skill-bars">
      <div class="bar">
        <div class="info">
          <span>HTML</span>
        </div>
        <div class="progress-line html">
          <span></span>
        </div>
      </div>
      <div class="bar">
        <div class="info">
          <span>CSS</span>
        </div>
        <div class="progress-line css">
          <span></span>
        </div>
      </div>
      <div class="bar">
        <div class="info">
          <span>jQuery</span>
        </div>
        <div class="progress-line jquery">
          <span></span>
        </div>
      </div>
      <div class="bar">
        <div class="info">
          <span>Python</span>
        </div>
        <div class="progress-line python">
          <span></span>
        </div>
      </div>
      <div class="bar">
        <div class="info">
          <span>MySQL</span>
        </div>
        <div class="progress-line mysql">
          <span></span>
        </div>
      </div>
    </div>


</section>

Это точный код, который у меня есть в моем проекте, и, как вы можете видеть, он отлично работает здесь, и анимация тоже работает, но у меня точно такой же код в моем проекте, но там он вообще не работает. Почему?

(пожалуйста, продолжайте и посмотрите, что не так, потому что я, кажется, не могу понять это уже час.) CSS панели навыков сохраняется на assets/css/skills.css HTML-код панели навыков расположен сразу после «Избранные блоги дня»**

Отсюда я изначально получил весь код для панели навыков: https://www.codingnepalweb.com/2020/09/animated-skills-bar-ui-design-using.html

Комментарии:

1. Ваш проект является частным за repl.it веб-сайт, его нельзя увидеть без регистрации. Также это работает во фрагменте, размещенном здесь, поэтому ищите конфликты в CSS, если вы вводите этот штрих-код откуда-то еще…

2. Я поделился ссылкой на свой проект, вы должны иметь к нему доступ

3. Я не могу. Как я уже сказал. Вы пытаетесь выполнить веб-разработку, как насчет того, чтобы открыть личное окно и попробовать себя, прежде чем комментировать, что оно «должно» работать. Базовая отладка 101.

4. Ну, кто-то еще сейчас работает над моим проектом, я не знаю, почему вы не можете получить доступ. Кроме того, я не говорю, что «это должно сработать», мне просто требуется некоторая помощь / руководство, потому что я пробовал все, что мог, но не могу заставить анимацию работать в моем проекте. Спасибо.

5. И я просто говорю, что люди не могут помочь с вашим запросом, поскольку ссылка на проект не работает. И вы действительно не можете просить людей регистрироваться где угодно. Уверен, что это противоречит какой-то политике здесь, или должно.

Метки: