html – 用于新闻自动收报机的css3自定义动画

概述我是 CSS3的新手,所以如果你觉得这个问题很愚蠢,请忽略. 我正在制作动画,其中我有4个列表项,我需要向上移动这些列表项无限次,当一个旋转完成时,它向下返回然后开始动画但我需要从那一点继续. 第二件事是我需要停止列表项目4秒,基本上它是一个新闻自动收报机,所以我需要像这一个,我已经尝试和开发的东西,但不是我想要的. 这是我的代码： HTML <div class="news"><ul> 我是 CSS3的新手,所以如果你觉得这个问题很愚蠢,请忽略.

我正在制作动画,其中我有4个列表项,我需要向上移动这些列表项无限次,当一个旋转完成时,它向下返回然后开始动画但我需要从那一点继续.

第二件事是我需要停止列表项目4秒,基本上它是一个新闻自动收报机,所以我需要像这一个,我已经尝试和开发的东西,但不是我想要的.

这是我的代码：

HTML

<div ><ul>    <li>1111</li>    <li>2222</li>    <li>3333</li>    <li>4444</li>    </ul></div>

CSS3

@keyframes ticker {        0% {            margin-top: 0        }        25% {            margin-top: -30px        }        50% {            margin-top: -60px        }        75% {            margin-top: -90px        }        100% {            margin-top: 0        }    }    .news {        wIDth: 350px;        height: 32px;        overflow: hIDden;        -webkit-user-select: none;    }    .news ul {        wIDth: 350px;        padding-left: 10px;        animation: ticker 10s infinite;        -webkit-user-select: none;    }    .news ul li {        line-height: 29px;        List-style: none;        Font-size: 10pt;    }    .news ul:hover {        animation-play-state: paused    }    .news span:hover+ul {        animation-play-state: paused    }

我已将它添加到CodePen中,以便您可以有更好的想法.
任何建议都会非常有用!!

解决方法 我改变了你处理动画的方式.

现在,我分别为每个元素设置动画,但重复使用相同的动画并设置不同的延迟

@keyframes ticker {  0% {    transform: translateY(100%);  }  5%,25% {    transform: translateY(0%);  }  30%,100% {    transform: translateY(-100%);  }}.news {  wIDth: 350px;  height: 32px;  overflow: hIDden;  border: solID 1px green;  position: relative;}.news ul {  wIDth: 350px;  padding-left: 10px;}.news li {  position: absolute;  top: 0px;  line-height: 29px;  List-style: none;  Font-size: 10pt;  animation: ticker 8s infinite linear;}.news ul:hover {  animation-play-state: paused}.news li:nth-child(4) {  animation-delay: -2s;}.news li:nth-child(3) {  animation-delay: -4s;}.news li:nth-child(2) {  animation-delay: -6s;}

<div >  <ul>    <li>1111</li>    <li>2222</li>    <li>3333</li>    <li>4444</li>  </ul></div>

总结

以上是内存溢出为你收集整理的html – 用于新闻自动收报机的css3自定义动画全部内容，希望文章能够帮你解决html – 用于新闻自动收报机的css3自定义动画所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。