Question

关于纯粹的css＆＃39; marquee＆＃39;我在博客博客上使用以下垂直顶级代码。

＆＃13;

#marquee {
width:100%;
height:410px;
overflow:hidden;
}
#marquee p {
display:inline-block;
padding-top:100%;
animation:marquee 100s linear infinite;
}
#marquee p:hover {
animation-play-state: paused
}
@keyframes marquee {
0%   { transform: translate(0, 0); }
100% { transform: translate(0, -100%); }
}

＆＃13;

<div id="marquee">
<div class="marquee">
<p>

＆＃13;

它的作用是打算（从下到上隐藏溢出），但奇怪的是（至少对我来说）文本颜色与其他帖子和页面的文本颜色不同，这是我设置的＃0093dd。

我花了大约8小时搜索和试验方法来放置这种颜色的字幕文本。我尝试了一切（在css模板和html帖子上）但没有成功。：（

因此，.. 一些stackoverflow专家知道（并且可以在这里分享）放置这种颜色文本的技巧吗？

抓住机会，......选框滚动速度为100秒但速度仍然很快。这是正常的？我想不要与这类功能的其他用户进行比较。

期待有关解决这两个问题的反馈意见。

提前致谢。此致

Rubasi

Answer 1

我不确定我理解你的意图。你想向上移动文字吗？

请参阅下面的实例：

＆＃13;

a {
  color: #0093dd;
  text-decoration: none;
}

a:hover {
  color: magenta;
}

.wrapper {
  width: 500px;
  margin: 25px auto;
}

.marquee {
  width: 500px;
  height: 50px;
  margin: 25px auto;
  overflow: hidden;
  position: relative;
  border: 1px solid #000;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100;White+3D */
  background: rgb(255, 255, 255);
  /* Old browsers */
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5', GradientType=0);
  /* IE6-9 */
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);
  box-shadow: inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);
  -webkit-transition: background-color 350ms;
  -moz-transition: background-color 350ms;
  transition: background-color 350ms;
}

.marquee p {
  position: absolute;
  font-family: Tahoma, Arial, sans-serif;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 50px;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 0px #000000;
  filter: dropshadow(color=#000000, offx=1, offy=1);
  transform: translateX(100%);
  -moz-transform: translateX(100%);
  -webkit-transform: translateX(100%);
}

.marquee.up p {
  transform: translateY(100%);
  -moz-transform: translateY(100%);
  -webkit-transform: translateY(100%);
}

.marquee.up p:nth-child(1) {
  animation: up-one 10s ease infinite;
  -moz-animation: up-one 10s ease infinite;
  -webkit-animation: up-one 10s ease infinite;
}

.marquee.up p:nth-child(2) {
  animation: up-two 10s ease infinite;
  -moz-animation: up-two 10s ease infinite;
  -webkit-animation: up-two 10s ease infinite;
}


/*================================
	Move the Marquee Upwards
==================================*/


/** Mozilla Firefox Keyframes **/

@-moz-keyframes up-one {
  0% {
    -moz-transform: translateY(100%);
  }
  10% {
    -moz-transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(0);
  }
  50% {
    -moz-transform: translateY(-100%);
  }
  100% {
    -moz-transform: translateY(-100%);
  }
}

@-moz-keyframes up-two {
  0% {
    -moz-transform: translateY(100%);
  }
  50% {
    -moz-transform: translateY(100%);
  }
  60% {
    -moz-transform: translateY(0);
  }
  90% {
    -moz-transform: translateY(0);
  }
  100% {
    -moz-transform: translateY(-100%);
  }
}


/** Webkit Keyframes **/

@-webkit-keyframes up-one {
  0% {
    -webkit-transform: translateY(100%);
  }
  10% {
    -webkit-transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(-100%);
  }
}

@-webkit-keyframes up-two {
  0% {
    -webkit-transform: translateY(100%);
  }
  50% {
    -webkit-transform: translateY(100%);
  }
  60% {
    -webkit-transform: translateY(0);
  }
  90% {
    -webkit-transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100%);
  }
}

＆＃13;

<div class="wrapper">
  <div class="marquee up">
    <p><a href="http://www.startribune.com/dna-testing-americans-sign-away-their-rights/479020833/" target="_blank">DNA testing: Americans sign away their rights</a></p>
    <p><a href="https://gizmodo.com/genetics-research-is-failing-most-of-the-worlds-populat-1824032089" target="_blank">Genetics Research Is Failing Most of the World's Population</a></p>
  </div>
</div>

＆＃13;

Answer 2

.container {
 width:100%;
 height: 100px;
 margin: 50px 0; /*remove*/
 border:1px solid red; /*remove*/
 position:relative;
 /*overflow:hidden; */ /*add back */
}
.container .text {
  background:rgba(0,255,0,0.4); /*remove*/
  color:#0093dd; /*set color*/
  position:absolute;
  top:100%;
  animation: marquee 5s linear infinite;
}

@keyframes marquee {
  0% {
    top:100%;
    transform: translate(0, 0%);
  }
  100% {
    top: 0%;
    transform: translate(0,-100%);
  }
}

<div class="container">
  <div class="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy</div>
</div>

纯css文字选框

2 个答案: