如何在无限循环中动态更改<span>
标记的内容。
我尝试过使用以下方法。是否可以使用纯CSS动画执行此操作?如果纯CSS不可能,请建议另一种方法。
HTML:
<p>Lorem ipsum <span></span> sit amet.</p>
CSS:
span {
content: '';
animation: flip 2s infinite;
}
@keyframes flip {
10% {
content: 'Example no1';
}
40% {
content: '';
}
80% {
content: 'Example no2';
}
100% {
content: '';
}
}
答案 0 :(得分:1)
无法使用span
属性动态更改content
的内容。它最初设计为仅与伪元素一起使用(如:before
或:after
)。
但是,这可以通过HTML和Javascript实现,如下所示:
var i = 0; // The counter variable
var arrayLength = 5; // The max length of the data array
var dataArray = ['Example 1', 'Example 2', 'Example 3', 'Example 4', 'Example 5']; // The actual data which have to be shown in a loop
function changeval() {
if (i == arrayLength) i = 0; // If counter reaches max length, reset it
document.getElementById('dataSpan').innerHTML = dataArray[i]; // Set the value to the span
i++; // Increment counter
}
setInterval(changeval, 500); // Call the function to change value at defined intervals
<!-- Just add an ID to your span to which the content must be set -->
<p>Lorem ipsum <span id='dataSpan'></span> sit amet.</p>
尽管CSS并不是最适合你的情况,但如果没有,可以使用一些CSS技巧/黑客实现以下目标。数组中的项目很小/有限。
body, html{
font-size: 16px;
}
#dataSpan {
height: 1.25em;
overflow: hidden;
display: inline-block;
vertical-align: top;
padding: 0px;
line-height: 1.25em;
top:0;
}
#dataSpan span {
position: relative;
-webkit-animation: changeContent 5s steps(4) infinite;
-moz-animation: changeContent 5s steps(4) infinite;
animation: changeContent 5s steps(4) infinite;
}
@-webkit-keyframes changeContent {
from{top:0;}
to {top:-5em;}
}
@-moz-keyframes changeContent {
from{top:0;}
to {top:-5em;}
}
@keyframes changeContent {
from{top:0;}
to {top:-5em;}
}
<p>Lorem ipsum <span id="dataSpan">
<span>Example 1<br>Example 2<br>Example 3<br>Example 4<br>Example 5</span>
</span> sit amet.</p>