как сделать шатер с помощью CSS - PullRequest
Новая
       11

как сделать шатер с помощью CSS

0 голосов
/ 17 сентября 2018

я использовал элемент marquee ранее для своих флеш-новостей, но так как он устарел, основываясь на этом https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee Я попытался использовать CSS вместо. но есть проблема, с которой я сталкиваюсь, показывается только 1-й элемент span, а не весь мой элемент span. 

.flashnews_today {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  /*box-sizing: border-box;*/
  /*border: 1px green solid;*/
}

.flashnews_today span {
  display: inline-block;
  padding-left: 100%;
  text-indent: 0;
  /*border: 1px red solid;*/
  -webkit-animation: flashnews_today 45s linear infinite;
  animation: flashnews_today 45s linear infinite;
}

.flashnews_today span:hover {
  animation-play-state: paused
}


/* Make it move */

@keyframes flashnews_today {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}
<div class="flashnews_today">
  <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span><span>Hello, I am a StackOverflow user. </span>
  <span>Hello, I am a StackOverflow user.</span>
  <span>Hello, I am a StackOverflow user. </span>
  <span>Hello, I am a StackOverflow user. </span>
  <span>Hello, I am a StackOverflow user. </span>
</div>

Ответы [ 2 ]

0 голосов
/ 17 сентября 2018

Все теги span рассматриваются как один. В .flashnews_today span добавьте свойство css display к block. Это будет работать нормально. 

.flashnews_today {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  /*box-sizing: border-box;*/
  /*border: 1px green solid;*/
  
}

.flashnews_today span {
  display: inline-block;
  padding-left: 100%;
  text-indent: 0;
  /*border: 1px red solid;*/
  -webkit-animation: flashnews_today 45s linear infinite;
  animation: flashnews_today 45s linear infinite;
  display:block;
}

.flashnews_today span:hover {
  animation-play-state: paused
}


/* Make it move */

@keyframes flashnews_today {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="flashnews_today">
  <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span><span>Hello, I am a StackOverflow user. </span>
  <span>Hello, I am a StackOverflow user.</span>
  <span>Hello, I am a StackOverflow user. </span>
  <span>Hello, I am a StackOverflow user. </span>
  <span>Hello, I am a StackOverflow user. </span>
</div>
</body>
</html>
0 голосов
/ 17 сентября 2018

Ваш CSS относится ко всем тегам span, и он пытается анимировать их в одной и той же позиции. Поэтому отображается только первый, в то время как другие не отображаются. Если вы будете использовать тег br после каждого промежутка, вы увидите, что другие ваши пролеты теперь становятся видимыми. 

.flashnews_today {
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden;
  /*box-sizing: border-box;*/
  /*border: 1px green solid;*/
}

.flashnews_today span {
  display: inline-block;
  padding-left: 100%;
  text-indent: 0;
  /*border: 1px red solid;*/
  -webkit-animation: flashnews_today 45s linear infinite;
  animation: flashnews_today 45s linear infinite;
}

.flashnews_today span:hover {
  animation-play-state: paused
}


/* Make it move */

@keyframes flashnews_today {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}
<div class="flashnews_today">
  <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span>
  <br/>
  <span>Hello, I am a StackOverflow user. </span>
  <br/>
  <span>Hello, I am a StackOverflow user.</span>
  <br/>
  <span>Hello, I am a StackOverflow user. </span>
  <br/>
  <span>Hello, I am a StackOverflow user. </span>
  <br/>
  <span>Hello, I am a StackOverflow user. </span>
</div>
...