Автоматический отскок текста назад и четвертый CSS как выделение для длинной текстовой метки

Question

Автоматический отскок текста назад и четвертый CSS как выделение для длинной текстовой метки

1

У меня есть требование показать функцию автоматического перемещения текста (так же, как выделение с альтернативным поведением) на ярлыке с длинным текстом.

Как вы можете видеть Созданный On: 28 ноября, 2017 ярлык в sap.m.ObjectAttribute только что обернут из-за поведения по умолчанию элемента управления ObjectListItem. Я ищу CSS, который мог бы сделать переносимый текст перемещаемым спереди и назад, как и marquee с альтернативным поведением, чтобы я мог видеть весь развернутый текст, отскакивающий спереди и сзади.

Пожалуйста, обратитесь к примеру. В этом случае, когда вы наводите указатель мыши на div, метка начинает прокрутку влево, и когда вы отнимаете мышь от div, она будет прокручиваться назад до начальной точки.

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

Пожалуйста, помогите мне в этом.

Другой пример, основанный на шатрах

body {
  background-color: lightgrey;
}

.blue-btn {
  position: absolute;
  left: 35%;
  top: 40%;
}

.blue-btn a {
  color: white;
  text-decoration: none;
  margin-top: 0em;
  text-align: center;
  display: inline-block;
  /* important */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blue-btn,
.first-link {
  -moz-transition: 3.3s;
  transition: 3.3s;
  -moz-transition-timing-function: linear;
  transition-timing-function: linear;
}

.blue-btn {
  height: 64px;
  font: normal normal 700 1em/4em Arial, sans-serif;
  overflow: hidden;
  width: 200px;
  background-color: #3b5998;
}

.blue-btn:hover {
  background-color: #003D99;
}

.blue-btn a:hover {
  text-decoration: none;
}

.first-link {
  margin-left: 0em;
}

.blue-btn:hover .first-link {
  margin-left: -300px;
}

<div class="blue-btn">
  <a class="first-link" href="">Thisisanextreamlylongtext,kindoflikeanamecouldbe</a>
</div>

Prashob Thekkyal 29 нояб. 2017, в 13:46

Источник

0

Я думаю, вы должны использовать javascript для этого - вы пробовали таким образом?
Grzegorz Miśkiewicz 29 нояб. 2017, в 12:19
0

Да, мне нужно немного JavaScript / CSS. У меня есть только пример сниппета в качестве обходного пути.
Prashob Thekkyal 29 нояб. 2017, в 12:21

Теги:

javascript

css

sapui5

1 ответ

Ещё вопросы

Я думаю, вы должны использовать javascript для этого - вы пробовали таким образом?
Да, мне нужно немного JavaScript / CSS. У меня есть только пример сниппета в качестве обходного пути.

fen1x · Accepted Answer · 2017-11-29T10-59-00.000Z

Используйте бесконечную анимацию для автоматической прокрутки .link:

body {
  margin: 0;
  background-color: lightgrey;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.container {
  padding: 15px;
  background-color: #3b5998;
  width: 200px;
  font-family: Arial,sans-serif;
  font-weight: 700;
  line-height: 1.5;
  overflow: hidden;
  width: 200px;
}
.link {
  color: white;
  text-decoration:none;
  text-align: center;
  white-space: nowrap;
  display: inline-flex;
  line-height: 2;
}
.link_animated {
  animation: backAndForth 5s linear infinite;
}
@keyframes backAndForth {
  0% { transform: translateX(0); }
  10% { transform: translateX(0); }
  45% { transform: translateX(calc(-100% + 200px)); }
  55% { transform: translateX(calc(-100% + 200px)); }
  90% { transform: translateX(0); }
  100% { transform: translateX(0); }
}

<div class="container">
  <a class="link link_animated" href="">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </a>
</div>