2

Всем доброго времени суток. Такой вопрос, не знаю как сделать так чтобы к каждому слову в круге можно было обращаться по отдельности(в css нужно будет цвет через одно слово менять буквам). Тут код https://jsfiddle.net/1st3gypz/10/

let circle = document.querySelector('.circle');
let content = 'РазработкаРазработкаРазработкаРазработка';
let radius = 180;

function generateLetters(text) {
  circle.innerHTML = ''
  const letters = text.split('')
  const step = 360 / letters.length
  letters.forEach((l, i) => {
    const span = document.createElement('span')
    span.innerText = l
    const deg = step * i
    span.style.transform = transform(deg, radius)
    circle.append(span)
  })
}

function transform(deg, radius = 180) {
  return `rotateY(${deg}deg) translateZ(${radius}px)`
}


generateLetters(content)
.slide-page__content {
  min-height: 100vh;
  position: relative;
  padding: 100px 60px 0px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.scene {
  margin: 0px -60px 0px 0px;
  perspective: 1000px;
  perspective-origin: 0 -150px;
  transform-style: preserve-3d;
}

.circle {
  transform-style: preserve-3d;
  animation: rotate 35s linear infinite;
}

.circle span {
  text-transform: uppercase;
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 0;
  min-width: 33px;
  background: #161616;
  color: black;
  -webkit-text-stroke: 1px #ccba96;
  -webkit-text-fill-color: #161616;
  font-size: 28px;
  perspective-origin: center;
  transform-style: preserve-3d;
  border-left: 4px solid #161616;
  border-right: 4px solid #161616;
  border-top: 10px solid #161616;
  border-bottom: 10px solid #161616;
  border-radius: 2px;
}

.circle span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(22, 22, 22, 0.45);
  transform: translateZ(-5px);
}

.circle span:nth-child(-n+10) {
  color: #ccba96;
  -webkit-text-stroke: 0px #ccba96;
  -webkit-text-fill-color: #ccba96;
}

@keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(1turn);
  }
}
<div class="slide-page__content">
  <div class="scene">
    <div class="circle"></div>
  </div>
</div>

1
  • Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете. Commented 4 янв. 2022 в 16:09

1 ответ 1

3

Можно сделать на js. Создаём массив цветов для каждого слова, считаем слова по заглавным буквам и берем цвет для span из массива по значению счетчика слов. Немного исправлен сss..

let circle = document.querySelector('.circle');
let content = 'РазработкаРазработкаРазработкаРазработка';
let radius = 180;

let colorWord = ['red', 'green', 'blue', 'orange'];//Цвета по количеству слов
let countWord = -1; //Счетчик слов

function generateLetters(text) {
  circle.innerHTML = '';
  const letters = text.split('');
  const step = 360 / letters.length;
  letters.forEach((l, i) => {
    const span = document.createElement('span');
    changeColor(l, span);
    const deg = step * i;
    span.style.transform = transform(deg, radius);
    circle.append(span);
  })
}

function changeColor(l, span) {
  if (l.toUpperCase() === l) ++countWord; //Определяем новое слово по заглавной букве и увеличиваем счетчик слов
  span.innerText = l.toUpperCase(); //В css к верхнему регистру не приводим делаем это здесь
  span.style.color = colorWord[countWord]; //Присваиваем цвет
}

function transform(deg, radius = 180) {
  return `rotateY(${deg}deg) translateZ(${radius}px)`
}


generateLetters(content)
.slide-page__content {
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.scene {
  margin: 0px 0px 0px 0px;
  perspective: 1000px;
  perspective-origin: 0 -150px;
  transform-style: preserve-3d;
}

.circle {
  transform-style: preserve-3d;
  animation: rotate 35s linear infinite;
}

.circle span {
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 0;
  min-width: 29px;
  background: #161616;
  color: white;
  font-size: 28px;
  perspective-origin: center;
  transform-style: preserve-3d;
}

.circle span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(22, 22, 22, 0.45);
  transform: translateZ(-5px);
}

@keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(1turn);
  }
}
<div class="slide-page__content">
  <div class="scene">
    <div class="circle"></div>
  </div>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.