我有一个滚动字幕,其滚动方向类似于页面底部的Apple Arcade页面上的Apple。 https://www.apple.com/apple-arcade/
我让它正常工作,但在11中确实很慢,并且不会像在其他浏览器中那样遍历整个选取框。我试图用纯CSS来实现这一点,但也许ie11不可能实现,或者我只是缺少了什么?
代码笔链接:https://codepen.io/devi8/pen/89e45e26d38f173d87993e167a5f4695
<style>
.marquee--container {
width: 100%;
padding: 1em;
display: flex;
align-items: center;
box-sizing: border-box;
overflow: hidden;
}
.marquee--content {
display: flex;
}
.scroll {
animation: scroll 20s linear infinite;
}
.scroll.reverse {
animation-direction: reverse;
}
.marquee--content:hover {
animation-play-state: paused;
}
.marquee--item {
display: block;
margin: 0 .6rem;
transition: all 0.2s ease;
}
.marquee--item:hover {
background: rgba(255,255,255,0.5);
transform: scale(1.03);
cursor: pointer;
}
.marquee--item img {
border-radius: 1rem;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
</style>
<section class="marquee--container">
<div class="marquee--content scroll">
<article class="marquee--item">
<img src="https://via.placeholder.com/600x300?text=01" alt="image">
</article>
<article class="marquee--item">
<img src="https://via.placeholder.com/600x300?text=02" alt="image">
</article>
<article class="marquee--item">
<img src="https://via.placeholder.com/600x300.jpg/f00/fff?text=03" alt="image">
</article>
<article class="marquee--item">
<img src="https://via.placeholder.com/600x300?text=04" alt="image">
</article>
<article class="marquee--item">
<img src="https://via.placeholder.com/600x300?text=05" alt="image">
</article>
<article class="marquee--item">
<img src="https://via.placeholder.com/600x300.jpg/1CACF4/fff?text=06" alt="image">
</article>
<article class="marquee--item">
<img src="https://via.placeholder.com/600x300?text=01" alt="image">
</article>
<article class="marquee--item">
<img src="https://via.placeholder.com/600x300?text=02" alt="image">
</article>
<article class="marquee--item">
<img src="https://via.placeholder.com/600x300.jpg/f00/fff?text=03" alt="image">
</article>
<article class="marquee--item">
<img src="https://via.placeholder.com/600x300?text=04" alt="image">
</article>
<article class="marquee--item">
<img src="https://via.placeholder.com/600x300?text=05" alt="image">
</article>
<article class="marquee--item">
<img src="https://via.placeholder.com/600x300.jpg/1CACF4/fff?text=06" alt="image">
</article>
</div>
</section>
代替display:flex将所有内容都放在一行上,您可以使用display:table / table-cell实现得很好的方法:
https://jsbin.com/cobiyugafo/1/edit (从Internet Explorer 11运行并可编辑)
.marquee--container {
width: 100%;
padding: 1em;
display: flex;
align-items: center;
box-sizing: border-box;
overflow: hidden;
min-width:0;
}
.marquee--content {
display: table; /* <=== here */
border-spacing: 0.6rem 0;
}
.scroll {
animation: scroll 20s linear infinite;
}
.scroll.reverse {
animation-direction: reverse;
}
.marquee--content:hover {
animation-play-state: paused;
}
.marquee--item {
display: table-cell; /* <=== here */
/* margin replaced by border-spacing */
transition: all 0.2s ease;
}
.marquee--item:hover {
background: rgba(255,255,255,0.5);
transform: scale(1.03);
cursor: pointer;
}
.marquee--item img {
border-radius: 1rem;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}