Как правильно добавить мои CSS загружаемые тексты в мою css загрузочную анимацию? Я вижу только текст заполнителя - PullRequest
Новая
       4

Как правильно добавить мои CSS загружаемые тексты в мою css загрузочную анимацию? Я вижу только текст заполнителя

2 голосов
/ 21 апреля 2020

Я не уверен, как отформатировать html, чтобы он отображал мои загружаемые тексты вместо "..." заполнителя, который я установил. 

@keyframes loading-text {
  0% {
    content: "Pizza";
  }
  30% {
    content: "Burgers";
  }
  35% {
    content: "Chicken";
  }
  60% {
    content: "Hot Dogs";
  }
  75% {
    content: "Funnel Cakes";
  }
  90% {
    content: "Ice Cream";
  }
  95% {
    content: "Tacos";
  }
}

.loading-text {
  top: 205px;
  margin: auto;
  font-family: sans-serif;
  font-size: 1.5em;
}

.loading-text:after {
  content: "Welcome";
  font-weight: bold;
  animation-name: loading-text;
  animation-duration: 12s;
  animation-iteration-count: 1;
}

body {
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.triangle {
  stroke-dasharray: 17;
  animation: dash 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: 136;
  }
}

.loading {
  font-family: 'Orbitron', sans-serif;
  font-size: 7px;
  animation: blink .9s ease-in-out infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<svg width="200" height="200" viewBox="0 0 40 60">
      <polygon class="triangle" fill="none" stroke="#fc0303" stroke-width="1" points="16,1 32,32 1,32" />
      <text class="loading" x="0" y="45" fill="#fff">...</text>
    </svg>
<div class="scss-loader">
</div>

JSFiddle: https://jsfiddle.net/j12eqhuy/5/

Я не уверен, как бы я связал тексты css на месте строки "...". Я очень новичок в этом.

Ответы [ 3 ]

2 голосов
/ 21 апреля 2020

Элемент <text> не принимает псевдоэлементы. Используя span, это можно сделать только с css. Как это: 

@keyframes loading-text {
  0% {
    content: "Pizza";
  }
  30% {
    content: "Burgers";
  }
  35% {
    content: "Chicken";
  }
  60% {
    content: "Hot Dogs";
  }
  75% {
    content: "Funnel Cakes";
  }
  90% {
    content: "Ice Cream";
  }
  95% {
    content: "Tacos";
  }
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-text {
  margin-top: -50px;
  margin-right: 20px;
  font-family: sans-serif;
  font-size: 1.5em;
}

.loading-text:after {
  content: "Welcome";
  color: #fff;
  font-weight: bold;
  animation-name: loading-text;
  animation-duration: 12s;
  animation-iteration-count: 1;
}

body {
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.triangle {
  stroke-dasharray: 17;
  animation: dash 2.5s cubic-bezier(0.35, 0.04, 0.63, 0.95) infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: 136;
  }
}

.loading {
  font-family: 'Orbitron', sans-serif;
  font-size: 7px;
  animation: blink .9s ease-in-out infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}
<div class="loading-container">
  <svg width="200" height="200" viewBox="0 0 40 60">
    <polygon class="triangle" fill="none" stroke="#fc0303" stroke-width="1" points="16,1 32,32 1,32" />
  </svg>
  <span class="loading-text"></span>
</div>
<div class="scss-loader"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
0 голосов
/ 21 апреля 2020

Я не думаю, что .loading-text в CSS соответствует чему-либо.

content в CSS можно использовать только для элементов psuedo, и я сомневаюсь, что они могут быть использованы внутри SVG.

0 голосов
/ 21 апреля 2020

С чистым CSS это невозможно.

Вам придется использовать JavaScript, чтобы изменить текст.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...