Question

这是我正在使用的CSS：

figure p {
opacity:0;
}

figure:hover p {
 opacity:1;
 -webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateY(100%);
 -webkit-transform:translateY(100%);    
 transform:translateY(100%);
 /* Apply animation to this element */  
 -moz-animation: scroll-up 5s linear infinite;
 -webkit-animation: scroll-up 5s linear infinite;
 animation: scroll-up 5s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-up {
 0%   { -moz-transform: translateY(100%); }
 100% { -moz-transform: translateY(-100%); }
}
@-webkit-keyframes scroll-up {
 0%   { -webkit-transform: translateY(100%); }
 100% { -webkit-transform: translateY(-100%); }
}
@keyframes scroll-up {
 0%   { 
 -moz-transform: translateY(100%); /* Browser bug fix */
 -webkit-transform: translateY(100%); /* Browser bug fix */
 transform: translateY(100%);       
 }
 100% { 
 -moz-transform: translateY(-100%); /* Browser bug fix */
 -webkit-transform: translateY(-100%); /* Browser bug fix */
 transform: translateY(-100%); 
 }
}

它可以很好地滚动文本，但我无法弄清楚如何逐渐进行不透明度转换。从上面的代码可以看出，我尝试将其添加到悬停样式：

 opacity:1;
 -webkit-transition: opacity 0.35s;
transition: opacity 0.35s;

页面上的结果样式不符合我的预期。文字突然出现了。这是一个无赖，因为我真正想要的是拥有动态的不透明度。换句话说，文本越高，它应该变得越透明。一旦它到达垂直滚动的最高点（文本从下到上滚动），它将是100％透明（又名0不透明度）。所以我有点担心，因为正如我上面所说，我甚至无法进行简单的不透明度转换。

问题：鉴于我目前的垂直滚动样式，是否有这种风格的方法？

Answer 1

试试这个

＆＃13;

p {
  opacity: 0;
}

.figure:hover p {
  margin: 0;
  line-height: 50px;
  text-align: center;
  /* Starting position */
  -moz-transform: translateY(100%);
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  /* Apply animation to this element */
  -moz-animation: scroll-up 8s linear infinite;
  -webkit-animation: scroll-up 8s linear infinite;
  animation: scroll-up 8s linear infinite;
}


/* Move it (define the animation) */

@-moz-keyframes scroll-up {
  0% {
    -moz-transform: translateY(100%);
    opacity: 0;
  }
  50%,60%{
    opacity: 1;
  }
  100% {
    -moz-transform: translateY(-100%);
    opacity: 0;
  }
}

@-webkit-keyframes scroll-up {
  0% {
    -webkit-transform: translateYsa(100%);
    opacity: 0;
  }
  50%,60%{
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-100%);
    opacity: 0;
  }
}

@keyframes scroll-up {
  0% {
    -moz-transform: translateY(100%);
    /* Browser bug fix */
    -webkit-transform: translateY(100%);
    /* Browser bug fix */
    transform: translateY(100%);
    opacity: 0;
  }
  50%,60%{
    opacity: 1;
  }
  100% {
    -moz-transform: translateY(-100%);
    /* Browser bug fix */
    -webkit-transform: translateY(-100%);
    /* Browser bug fix */
    transform: translateY(-100%);
    opacity: 0;
  }
}

＆＃13;

<div class="figure">
  Hover here
  <br>
  <br>
  <p>
    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.
  </p>
</div>

＆＃13;

向垂直文本滚动添加动态透明度（不透明度）

1 个答案: