-1

我是一名 CSS 初学者。我想只使用 CSS 在我的网站的学分部分滚动开发人员的姓名。喜欢这个网站wrangle.in。但他们使用 javascript 和 jquery，但我想要纯 CSS 解决方案，但输出与网站相同。任何教程链接都会很有用。

4

1 回答 1

1

当然可以，这是我拼凑的一个简单示例：

<div id='container'>
<ul id='credits'>
    <li>Tom Doug</li>
    <li>Sophia</li>
    <li>Emma</li>
    <li>Olivia</li>
    <li>Isabella</li>
    <li>Ava</li>
    <li>Lily</li>
    <li>Zoe</li>
    <li>Chloe</li>
    <li>Mia</li>
    <li>Madison</li>
    <li>Emily</li>
    <li>Ella</li>
    <li>Madelyn</li>
    <li>Abigail</li>
    <li>Aubrey</li>
    <li>Addison</li>
    <li>Avery</li>
    <li>Layla</li>
</ul>


#container {
    width: 300px;
    height: 200px;
    overflow: hidden;
    position: relative;
}

#credits {
    width: 300px;
    position: absolute;
    -webkit-animation: goup 5s linear infinite;
    -moz-animation: goup 5s linear infinite;
}

@-webkit-keyframes goup {
    from { top: 0px; }
    to { top: -400px; }
}

@-moz-keyframes goup {
    from { top: 0px; }
    to { top: -400px; }
}

http://jsfiddle.net/3rJ6t/2/

注意浏览器之间的差异，CSS3 动画是相当新的东西。

于 2013-02-18T21:28:44.460 回答