Вращающиеся слова CSS - PullRequest
Новая
       17

Вращающиеся слова CSS

1 голос
/ 26 января 2020

Я пытаюсь сделать действительно простое вращающееся слово, основанное на CSS. У меня есть два вопроса:

1) Как мне сделать затухание быстрее в конце? Слова перекрываются так, как мне сейчас не нравится
2) Если вращающееся слово длинное, оно путается и перекрывается со следующими словами. Я сделал несколько мест, чтобы освободить место для этого, но наверняка должен быть лучший способ?

Вот jsfiddle.

https://jsfiddle.net/cqrauey4/

/*/
	ROTATING WORDS
	/*/

.rw-words{
	display: inline;
	text-indent: 10px;
}
.rw-words span{
	position: absolute;
	opacity: 0;
	overflow: hidden;
	width: auto;
	color: #0f269e;
}
.rw-words-1 span{
	-webkit-animation: rotateWordsFirst 14s linear infinite 0s;
	-ms-animation: rotateWordsFirst 14s linear infinite 0s;
	animation: rotateWordsFirst 14s linear infinite 0s;
}
}
.rw-words span:nth-child(1) { 
    -webkit-animation-delay: 0s; 
	-ms-animation-delay: 0s; 
	animation-delay: 0s; 
	color: #0f269e;
}

.rw-words span:nth-child(2) { 
    -webkit-animation-delay: 2s; 
	-ms-animation-delay: 2s; 
	animation-delay: 2s; 
	color: #0f269e;
}
.rw-words span:nth-child(3) { 
    -webkit-animation-delay: 4s; 
	-ms-animation-delay: 4s; 
	animation-delay: 4s; 
	color: #0f269e;	
}
.rw-words span:nth-child(4) { 
    -webkit-animation-delay: 6s; 
	-ms-animation-delay: 6s; 
	animation-delay: 6s; 
	color: #0f269e;
}
.rw-words span:nth-child(5) { 
    -webkit-animation-delay: 8s; 
	-ms-animation-delay: 8s; 
	animation-delay: 8s; 
	color: #0f269e;
}
.rw-words span:nth-child(6) { 
    -webkit-animation-delay: 10s; 
	-ms-animation-delay: 10s; 
	animation-delay: 10s; 
	color: #0f269e;
}

.rw-words span:nth-child(7) { 
    -webkit-animation-delay: 12s; 
	-ms-animation-delay: 12s; 
	animation-delay: 12s; 
	color: #0f269e;
}
}
@-webkit-keyframes rotateWordsFirst {
    0% { opacity: 1; -webkit-animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 1; height: 60px; }
	25% { opacity: 0; height: 60px; }
    100% { opacity: 0; }
}
@-ms-keyframes rotateWordsFirst {
    0% { opacity: 1; -ms-animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 1; height: 60px; }
	25% { opacity: 0; height: 60px; }
    100% { opacity: 0; }
}
@keyframes rotateWordsFirst {
    0% { opacity: 1; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 1; height: 60px; }
	25% { opacity: 0; height: 60px; }
    100% { opacity: 0; }
}
}
@media screen and (max-width: 768px){
	.rw-sentence { font-size: 18px; }
}
@media screen and (max-width: 320px){
	.rw-sentence { font-size: 9px; }
}
    <span>The boy
        <div class="rw-words rw-words-1">
            <span>sees </span>
            <span>wants </span>
            <span>uses </span>
            <span>finds </span>
            <span>needs </span>
            <span>tries </span>
            <span>loves </span>
        </div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;the girl.</span>

Ответы [ 2 ]

2 голосов
/ 26 января 2020

Без JS (или, возможно, какого-нибудь удивительного CSS волшебника dry) вы будете бороться с интервалом для «вращающихся» слов. Так почему бы не сделать это особенным? EG: 

.rw-words {
  display: inline-block;
  border: 2px solid blue;
  border-width: 0 0 2px 0;
  height: 1.1em;
  width: 4em;
  vertical-align: middle;
  overflow: hidden;
  position: relative;
}

.rw-words span {
  display: block;
  position: absolute;
  bottom: -100%;
  opacity: 0;
  overflow: hidden;
  width: auto;
  color: #0f269e;
}

.rw-words-1 span {
  -webkit-animation: rotateWordsFirst 14s linear infinite 0s;
  -ms-animation: rotateWordsFirst 14s linear infinite 0s;
  animation: rotateWordsFirst 14s linear infinite 0s;
}

.rw-words span:nth-child(1) {
  -webkit-animation-delay: 0s;
  -ms-animation-delay: 0s;
  animation-delay: 0s;
  color: #0f269e;
}

.rw-words span:nth-child(2) {
  -webkit-animation-delay: 2s;
  -ms-animation-delay: 2s;
  animation-delay: 2s;
  color: #0f269e;
}

.rw-words span:nth-child(3) {
  -webkit-animation-delay: 4s;
  -ms-animation-delay: 4s;
  animation-delay: 4s;
  color: #0f269e;
}

.rw-words span:nth-child(4) {
  -webkit-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
  color: #0f269e;
}

.rw-words span:nth-child(5) {
  -webkit-animation-delay: 8s;
  -ms-animation-delay: 8s;
  animation-delay: 8s;
  color: #0f269e;
}

.rw-words span:nth-child(6) {
  -webkit-animation-delay: 10s;
  -ms-animation-delay: 10s;
  animation-delay: 10s;
  color: #0f269e;
}

.rw-words span:nth-child(7) {
  -webkit-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
  color: #0f269e;
}

@-webkit-keyframes rotateWordsFirst {
  0% {
    opacity: 0;
    bottom: 0;
  }
  3% {
    opacity: 1;
    bottom: 0;
  }
  10% {
    opacity: 1;
    bottom: 0;
  }
  15% {
    opacity: 0;
    bottom: 100%;
  }
}

@-ms-keyframes rotateWordsFirst {
  0% {
    opacity: 0;
    bottom: 0;
  }
  3% {
    opacity: 1;
    bottom: 0;
  }
  10% {
    opacity: 1;
    bottom: 0;
  }
  15% {
    opacity: 0;
    bottom: 100%;
  }
}

@keyframes rotateWordsFirst {
  0% {
    opacity: 0;
    bottom: 0;
  }
  3% {
    opacity: 1;
    bottom: 0;
  }
  10% {
    opacity: 1;
    bottom: 0;
  }
  15% {
    opacity: 0;
    bottom: 100%;
  }
}

@media screen and (max-width: 768px) {
  .rw-sentence {
    font-size: 18px;
  }
}

@media screen and (max-width: 320px) {
  .rw-sentence {
    font-size: 9px;
  }
}
<div>The boy
  <div class="rw-words rw-words-1">
    <span>sees</span>
    <span>wants</span>
    <span>finds</span>
    <span>needs</span>
    <span>tries</span>
    <span>loves</span>
    <span>respects</span>
  </div> the girl.</div>
1 голос
/ 26 января 2020

Я советую вам сделать несколько изменений в вашем коде. Сначала поместите слова the girl. в тег span, чтобы легко манипулировать им. Затем примените к нему немного css, чтобы в качестве места для анимированных слов использовалось padding-left, например: 

.rw-words{
	display: inline;
}

#girlWord {
  margin-left: 40px;  /* <-- Add space for the animated words  */
}

.rw-words span{
	position: absolute;
	opacity: 0;
	overflow: hidden;
	width: auto;
	color: #0f269e;
}
.rw-words-1 span{
	animation: rotateWordsFirst 14s linear infinite 0s;
}

.rw-words span:nth-child(1) { 
    -webkit-animation-delay: 0s; 
	-ms-animation-delay: 0s; 
	animation-delay: 0s; 
	color: #0f269e;
}

.rw-words span:nth-child(2) { 
    -webkit-animation-delay: 2s; 
	-ms-animation-delay: 2s; 
	animation-delay: 2s; 
	color: #0f269e;
}
.rw-words span:nth-child(3) { 
    -webkit-animation-delay: 4s; 
	-ms-animation-delay: 4s; 
	animation-delay: 4s; 
	color: #0f269e;	
}
.rw-words span:nth-child(4) { 
    -webkit-animation-delay: 6s; 
	-ms-animation-delay: 6s; 
	animation-delay: 6s; 
	color: #0f269e;
}
.rw-words span:nth-child(5) { 
    -webkit-animation-delay: 8s; 
	-ms-animation-delay: 8s; 
	animation-delay: 8s; 
	color: #0f269e;
}
.rw-words span:nth-child(6) { 
    -webkit-animation-delay: 10s; 
	-ms-animation-delay: 10s; 
	animation-delay: 10s; 
	color: #0f269e;
}

.rw-words span:nth-child(7) { 
    -webkit-animation-delay: 12s; 
    -ms-animation-delay: 12s; 
    animation-delay: 12s; 
    color: #0f269e;
}

@keyframes rotateWordsFirst {
    0% { opacity: 1; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 0; height: 60px; }
	  25% { opacity: 0; height: 60px; }
    100% { opacity: 0; }
}

@media screen and (max-width: 768px){
	.rw-sentence { font-size: 18px; }
}
@media screen and (max-width: 320px){
	.rw-sentence { font-size: 9px; }
}
<span>The boy
  <div class="rw-words rw-words-1">
    <span>sees </span>
    <span>wants </span>
    <span>uses </span>
    <span>finds </span>
    <span>needs </span>
    <span>tries </span>
    <span>loves </span>
  </div>
  <span id="girlWord">the girl.</span> <!-- Wrap the word in a span -->
</span>
...