我想創建一個純CSS3幻燈片或多或少像這樣的:HTML圖片的標籤和列表標籤結合
我的實際HTML已經使用了<picture>
標籤根據顯示設置特定的圖像港口的方向,縱向或橫向。 幻燈片教程使用<ul>
和幾個<li>
元素來設置幻燈片的圖片。
當我嘗試在我的<picture>
元素內創建<ul>
和<li>
元素時,瀏覽器無法再找到圖像。
這裏是我的代碼部分:
HTML:
<div id="image">
<picture>
<source media="all and (orientation: portrait)" srcset="images/faust_portrait.jpg">
<source media="all and (orientation: landscape)" srcset="images/faust_landscape.jpg">
<img src="images/faust_1024.jpg" alt="faust">
</picture>
</div>
CSS:
#image {
width: 100%;
height: auto;
line-height: 0;
animation-name: move;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-delay: 0.5s;
animation-iteration-count: 2;
animation-direction: alternate;
}
@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(100%);
}
}
#image img {
width: 100%;
}
所以在相應的畫面滑出屏幕,然後再返回的那一刻,一個時間。我想要可能有5張照片,全部取決於視口的方向,有2個版本)不斷滑動。它是網頁的某種標題。 有關如何做到這一點的任何建議?