一个活生生的例子:https://codepen.io/cassidoo/pen/MyaWzp
这是整个代码的一小部分。
HTML
`<h1>Pure CSS3 Text Carousel</h1>`
`<div class="content-slider">
<div class="slider">
<div class="mask">
<ul>
<li class="anim1">
<div class="quote">Hello, this is a quote from a person.</div>
<div class="source">- Person</div>
</li>
<li class="anim2">
<div class="quote">Hello, this is a quote from another person.</div>
<div class="source">- Another person</div>
</li>
<li class="anim3">
<div class="quote">Hello, this is a quote from an animal.</div>
<div class="source">- Animal</div>
</li>
<li class="anim4">
<div class="quote">Hello, this is a quote from a plant.</div>
<div class="source">- Plant</div>
</li>
<li class="anim5">
<div class="quote">How do ya like that.</div>
<div class="source">- Cassidy</div>
</li>
</ul>
</div>
</div>
</div>
CSS
.slider li.anim1 {
-moz-animation: cycle 60s linear infinite;
-webkit-animation: cycle 60s linear infinite;
animation: cycle 60s linear infinite;
}
*/@-moz-keyframes cycle {
0% {
top: 0px;
}
4% {
top: 0px;
}
16% {
top: 0px;
opacity: 1;
z-index: 0;
}
20% {
top: 325px;
opacity: 0;
z-index: 0;
}
21% {
top: -325px;
opacity: 0;
z-index: -1;
}
92% {
top: -325px;
opacity: 0;
z-index: 0;
}
96% {
top: -325px;
opacity: 0;
}
100% {
top: 0px;
opacity: 1;
}
}
@-webkit-keyframes cycle {
0% {
top: 0px;
}
4% {
top: 0px;
}
16% {
top: 0px;
opacity: 1;
z-index: 0;
}
20% {
top: 325px;
opacity: 0;
z-index: 0;
}
21% {
top: -325px;
opacity: 0;
z-index: -1;
}
50% {
top: -325px;
opacity: 0;
z-index: -1;
}
92% {
top: -325px;
opacity: 0;
z-index: 0;
}
96% {
top: -325px;
opacity: 0;
}
100% {
top: 0px;
opacity: 1;
}
}
我试图创建超过5个文本幻灯片的基础上的代码。
但是当我尝试实现第六张幻灯片等等时,我遇到了问题。
我认为这里的主要问题是@-WEBKIT-KEYFRAMES
和@-MOZ-KEYFRAMES CYCLE
的数学计算。所有幻灯片都按顺序一起工作一个接一个。
如果我复制一个现有的幻灯片并尝试创建数字6,这将生成一个duplicated slideshow
,它将显示一个序列与重复的Frases!
问题:
- 是否有任何关键帧周期计算器或数学计算方法,我可以用来做10个幻灯片或更多?
- 有什么工具可以帮我计算吗?
- 我应该怎么做才能增加幻灯片的数量?
- 我应该在代码中实现什么?
我想重现与上面的link
示例相同的效果,但使用10
幻灯片或更多。所以我需要观察计算方法。
1条答案
按热度按时间hk8txs481#
我建议将common类添加到所有需要动画的元素(.anim1,.anim2...,.anim7)中。* 我添加了公共类
.anim
。* 在.anim
类样式上添加动画,并在.anim1, .anim2, ...., .anim7
类样式上添加延迟,延迟随总动画持续时间增加。换句话说,在所有元素上运行相同的动画,但有一些延迟。
如果你想添加/删除动画元素,你只需要在
animation-duration
属性上做简单的数学运算。它将是animation-delay time * total elements
。请参阅下面的Sniffs: