Question

在方形空间中，当我通过索引图像访问我的画廊时，只能将其视为“堆积”状态。我希望能够在幻灯片中查看它们，但是没有选择接受自定义CSS，这是我以前从未做过的。我应该从哪里开始？

Answer 1

您可以使用动画让它们淡入并将每个元素的延迟设置得更高，以创建时间来阅读幻灯片

Answer 2

怎么样？

＆＃13;

#container{
    background:green;
    width:300px;
    height:300px;
    overflow:hidden;
}
.img{
    
    -webkit-animation:up 20s infinite;
}

.img{
    height:300px;
}

@-webkit-keyframes up{
    0%{transform:translate(0,0)}
    20%{transform:translate(0,-300px)}
     40%{transform:translate(0,-600px)}
     60%{transform:translate(0,-900px)}
     80%{transform:translate(0,-1200px)}
    100%{transform:translate(0,-1500px)}
}

＆＃13;

<div id="container">
<div class="img ">
    <img src="http://placekitten.com/300/301">
</div>
<div class="img ">
    <img src="http://placekitten.com/300/302">
</div>
<div class="img ">
    <img src="http://placekitten.com/300/303">
</div>
<div class="img ">
    <img src="http://placekitten.com/300/304">
</div>
<div class="img  ">
    <img src="http://placekitten.com/300/305">
</div>
    <div class="img  ">
    <img src="http://placekitten.com/300/306">
</div>
    </div>

＆＃13;

如何创建纯CSS幻灯片？

2 个答案: