html - 高级选取框过渡

Question

<marquee direction="up" behavior="scroll" scrollamount="3" onmouseover="this.scrollAmount=1" onmouseout="this.scrollAmount=3" style="height:295px;margin-top:10px;">
   <ul class="menu">
       <li><i class="fa fa-caret-right"></i><a href="#">&nbsp;&nbsp;(DASA) 2014-15 <img class="new-tag" src="assets/img/new.gif"/></a></li>
       <li><i class="fa fa-caret-right"></i><a href="#">&nbsp;&nbsp;Advertisement for admission to  SC seats 2014</a></li>
       <li><i class="fa fa-caret-right"></i><a href="#">&nbsp;&nbsp;Notification - SC/ST & Minority Cell</a></li>
       <li><i class="fa fa-caret-right"></i><a href="#">&nbsp;&nbsp;Information About SC-ST Scholarship</a></li>
       <li><i class="fa fa-caret-right"></i><a href="#">&nbsp;&nbsp;Project Vacancy: (JRF) <img class="new-tag" src="assets/img/new.gif"/> </a></li>
       <li><i class="fa fa-caret-right"></i><a href="#">&nbsp;&nbsp;PG Admission (January Session) 2015</a></li>
   </ul><!-- /.menu -->
</marquee>

我希望显示一组 3 个元素，即前 3 个元素应该向上滑动，在屏幕上停留 3 秒，然后向上滑动。然后接下来的 3 个元素将通过向上滑动变得可见。我如何实现这种效果？

Answer 1

不要使用选取框，并非所有浏览器都支持它并且计划将其删除。来源:https://developer.mozilla.org/en/docs/Web/HTML/Element/marquee

您将需要使用 JavaScript 或 CSS 3 动画。使用 CSS3 动画的示例:http://codepen.io/anon/pen/jWezPm

    /* The animation code */
@keyframes example {
    0%   {margin-top: 0; height: 90px;}
    20%  {margin-top: 0; height: 90px;}
    25%  {margin-top: -90px; height: 180px;}
    45%  {margin-top: -90px; height: 180px;}
    50%  {margin-top: -180px; height: 270px;}
    70%  {margin-top: -180px; height: 270px;}
    75%  {margin-top: -270px}
    95%  {margin-top: -270px}
}

/* The element to apply the animation to */
.menu {
    margin: 0;
    padding: 0;
    height: 90px;
    animation: example 8s infinite;
}

.menu li {
  display: block;
  margin: 0;
  padding: 0;
  height: 30px;
  line-height: 30px;
}