html css3 滑块 - 如何在代码中计算新创建的关键帧滑块的百分比或运行时间?
html css3 slider - How to calculate the percent or runtime of a new created keyframe slider in the code?
我需要一盏灯!
一个活生生的例子:
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>
**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 个以上的文本幻灯片。
但是当我尝试执行第 6 张幻灯片等时遇到问题。
我认为这里的主要问题是 @-WEBKIT-KEYFRAMES
和 @-MOZ-KEYFRAMES CYCLE
数学计算 。所有幻灯片按顺序 一张接一张 。
如果我复制一张现有的幻灯片并尝试创建数字 6,这将生成一个 duplicated slideshow
并且它会显示 一个 序列和重复的 Frases!
问题:
有没有我可以用来制作 10 个或更多幻灯片的关键帧循环计算器或数学计算方法?
有什么工具可以帮助我进行计算吗?
请问我应该怎么做才能增加幻灯片的数量?
我应该在代码中实现什么?
我想重现与上面示例 link
相同的效果,但有 10
个幻灯片或更多。
这就是为什么我需要观察计算方法。
非常感谢您的帮助。
我建议将公共 class 添加到所有需要动画的元素(.anim1、.anim2...、.anim7)。 我添加了常见的 class .anim
. 在 .anim
class 样式上添加了动画并在 .anim1, .anim2, ...., .anim7
上添加了延迟class 样式随着总动画持续时间的增加而增加。
换句话说,运行所有元素上的相同动画有一些延迟。
如果你想要add/remove个动画元素,你只需要在animation-duration
属性上做简单的数学运算。它将是 animation-delay time * total elements
.
请参阅下面的代码段:
html,
body {
font-family: 'Droid Serif', serif;
}
h1 {
font-size: 60px;
text-align: center;
}
.content-slider {
width: 100%;
height: 360px;
}
.slider {
height: 320px;
width: 680px;
margin: 40px auto 0;
overflow: visible;
position: relative;
}
.mask {
overflow: hidden;
height: 320px;
}
.slider ul {
margin: 0;
padding: 0;
position: relative;
}
.slider li {
width: 680px;
height: 320px;
position: absolute;
top: -325px;
list-style: none;
}
.slider .quote {
font-size: 40px;
font-style: italic;
}
.slider .source {
font-size: 20px;
text-align: right;
}
.slider li.anim {
animation-name: cycle;
animation-duration: 21s; /*You need to do Math here. (delay time * total elements)*/
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-timing-function: linear;
}
.anim1{
animation-delay:0s;
}
.anim2{
animation-delay:3s;
}
.anim3{
animation-delay:6s;
}
.anim4{
animation-delay:9s;
}
.anim5{
animation-delay:12s;
}
.anim6{
animation-delay:15s;
}
.anim7{
animation-delay:18s;
}
.slider:hover li {
animation-play-state: paused;
}
@keyframes cycle {
0% {
top: -325px;
}
4% {
top: 0px;
}
16% {
top: 0px;
opacity: 1;
z-index: 0;
}
18% {
top: 325px;
opacity: 0;
z-index: 0;
}
92% {
top: -325px;
opacity: 0;
z-index: 0;
}
100% {
top: -325px;
opacity: 0;
}
}
<h1>Pure CSS3 Text Carousel</h1>
<div class="content-slider">
<div class="slider">
<div class="mask">
<ul>
<li class="anim anim1">
<div class="quote">1. Hello, this is a quote from a person.</div>
<div class="source">1 - Person</div>
</li>
<li class="anim anim2">
<div class="quote">2. Hello, this is a quote from another person.</div>
<div class="source">2 - Another person</div>
</li>
<li class="anim anim3">
<div class="quote">3. Hello, this is a quote from an animal.</div>
<div class="source">3 - Animal</div>
</li>
<li class="anim anim4">
<div class="quote">4. Hello, this is a quote from a plant.</div>
<div class="source">4 - Plant</div>
</li>
<li class="anim anim5">
<div class="quote">5. How do ya like that.</div>
<div class="source">5 - Cassidy</div>
</li>
<li class="anim anim6">
<div class="quote">6. How do ya like that.</div>
<div class="source">6 - Cassidy</div>
</li>
<li class="anim anim7">
<div class="quote">7. How do ya like that.</div>
<div class="source">7 - Cassidy</div>
</li>
</ul>
</div>
</div>
</div>
我需要一盏灯!
一个活生生的例子: 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>
**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 个以上的文本幻灯片。
但是当我尝试执行第 6 张幻灯片等时遇到问题。
我认为这里的主要问题是 @-WEBKIT-KEYFRAMES
和 @-MOZ-KEYFRAMES CYCLE
数学计算 。所有幻灯片按顺序 一张接一张 。
如果我复制一张现有的幻灯片并尝试创建数字 6,这将生成一个 duplicated slideshow
并且它会显示 一个 序列和重复的 Frases!
问题:
有没有我可以用来制作 10 个或更多幻灯片的关键帧循环计算器或数学计算方法?
有什么工具可以帮助我进行计算吗?
请问我应该怎么做才能增加幻灯片的数量?
我应该在代码中实现什么?
我想重现与上面示例 link
相同的效果,但有 10
个幻灯片或更多。
这就是为什么我需要观察计算方法。
非常感谢您的帮助。
我建议将公共 class 添加到所有需要动画的元素(.anim1、.anim2...、.anim7)。 我添加了常见的 class .anim
. 在 .anim
class 样式上添加了动画并在 .anim1, .anim2, ...., .anim7
上添加了延迟class 样式随着总动画持续时间的增加而增加。
换句话说,运行所有元素上的相同动画有一些延迟。
如果你想要add/remove个动画元素,你只需要在animation-duration
属性上做简单的数学运算。它将是 animation-delay time * total elements
.
请参阅下面的代码段:
html,
body {
font-family: 'Droid Serif', serif;
}
h1 {
font-size: 60px;
text-align: center;
}
.content-slider {
width: 100%;
height: 360px;
}
.slider {
height: 320px;
width: 680px;
margin: 40px auto 0;
overflow: visible;
position: relative;
}
.mask {
overflow: hidden;
height: 320px;
}
.slider ul {
margin: 0;
padding: 0;
position: relative;
}
.slider li {
width: 680px;
height: 320px;
position: absolute;
top: -325px;
list-style: none;
}
.slider .quote {
font-size: 40px;
font-style: italic;
}
.slider .source {
font-size: 20px;
text-align: right;
}
.slider li.anim {
animation-name: cycle;
animation-duration: 21s; /*You need to do Math here. (delay time * total elements)*/
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-timing-function: linear;
}
.anim1{
animation-delay:0s;
}
.anim2{
animation-delay:3s;
}
.anim3{
animation-delay:6s;
}
.anim4{
animation-delay:9s;
}
.anim5{
animation-delay:12s;
}
.anim6{
animation-delay:15s;
}
.anim7{
animation-delay:18s;
}
.slider:hover li {
animation-play-state: paused;
}
@keyframes cycle {
0% {
top: -325px;
}
4% {
top: 0px;
}
16% {
top: 0px;
opacity: 1;
z-index: 0;
}
18% {
top: 325px;
opacity: 0;
z-index: 0;
}
92% {
top: -325px;
opacity: 0;
z-index: 0;
}
100% {
top: -325px;
opacity: 0;
}
}
<h1>Pure CSS3 Text Carousel</h1>
<div class="content-slider">
<div class="slider">
<div class="mask">
<ul>
<li class="anim anim1">
<div class="quote">1. Hello, this is a quote from a person.</div>
<div class="source">1 - Person</div>
</li>
<li class="anim anim2">
<div class="quote">2. Hello, this is a quote from another person.</div>
<div class="source">2 - Another person</div>
</li>
<li class="anim anim3">
<div class="quote">3. Hello, this is a quote from an animal.</div>
<div class="source">3 - Animal</div>
</li>
<li class="anim anim4">
<div class="quote">4. Hello, this is a quote from a plant.</div>
<div class="source">4 - Plant</div>
</li>
<li class="anim anim5">
<div class="quote">5. How do ya like that.</div>
<div class="source">5 - Cassidy</div>
</li>
<li class="anim anim6">
<div class="quote">6. How do ya like that.</div>
<div class="source">6 - Cassidy</div>
</li>
<li class="anim anim7">
<div class="quote">7. How do ya like that.</div>
<div class="source">7 - Cassidy</div>
</li>
</ul>
</div>
</div>
</div>