旋轉木馬在網路上非常有名。 網路旋轉木馬是一種優雅的方式,可以將相似的內容組織到一個觸覺的地方,同時保留寶貴的網站空間。它們用於展示照片、提供產品,並吸引新訪客的興趣。但是它們的效果如何?有很多反對旋轉木馬的論點,以及研究使用旋轉木馬來提高性能。但是旋轉木馬如何影響網站的可用性?
在本文中,我們將討論輪播圖的基礎知識以及如何使用HTML和CSS建立輪播圖。
輪播圖是一種幻燈片展示,可以顯示一系列旋轉的橫幅/圖片。輪播圖通常出現在網站的首頁。它可以改善您的網站的外觀。 Web輪播圖,也被稱為滑桿、畫廊和幻燈片,可讓您在一個動態的「滑動」區塊中顯示文字、圖形、圖像甚至影片。它們是將內容和概念分組的優秀設計選擇,可以在特定內容之間建立視覺連結。
Web輪播圖因此非常適合在電子商務網站上推廣相關產品,在設計作品集中展示特色項目,甚至在房地產網站上循環播放家居內外照片。然而,它們並不總是最佳選擇。
許多設計師批評它們會減慢載入時間並破壞設計的流暢性。然而,與任何設計相關的事物一樣,當正確地完成時,網頁輪播可以以更容易遍歷的方式分割內容。
在這裡,我們將看到如何製作一個簡單的網頁輪播圖,而不使用像Bootstrap這樣的框架。
使用HTML建立走馬燈的基本結構,其中包含圖像。在下面的範例中,我們為走馬燈添加了4張圖像。此外,還有4個按鈕,點擊按鈕將顯示對應的圖像。
首先,建立一個作為容器的 div 元素,其中包含 標題 和 內容。
現在,content div 包含兩個部分- carousel content(包含在整個過渡過程中保持固定的文字部分)和slideshow# (包含移動部分,即4張圖片和按鈕)。
使用CSS來為輪播圖像和按鈕添加樣式。保持幻燈片的位置為相對定位。
使用CSS動畫使輪播中的影像平滑過渡。
以下範例示範了一個包含4個影像和控制影像顯示的按鈕的輪播。這些影像以固定時間間隔進行過渡顯示。
<!DOCTYPE html> <html> <head> <title> Web Carousel </title> <style> * { box-sizing: border-box; margin: 10px; padding: 3px; } body { background-color: rgb(195, 225, 235); } .box { width: 600px; height: 400px; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: auto; } .title { padding: 10px 0 10px 0; position: absolute; top: 10px; } .content { position: relative; top: 10%; } .carousel-content { position: absolute; top: 50%; left: 45%; transform: translate(-40%, -40%); text-align: center; z-index: 50; } .carousel-title { font-size: 48px; color: black; margin-bottom: 1rem; font-family: Times New Roman; } .slideshow { position: relative; height: 100%; overflow: hidden; } .wrapper { display: flex; width: 400%; height: 100%; top: 10%; border-radius: 30%; position: relative; animation: motion 20s infinite; } .slide { width: 80%; height: 200%; border-radius: 30%; } .img { width: 100%; height: 100%; object-fit: cover; } @keyframes motion { 0% {left: 0;} 10% {left: 0;} 15% {left: -100%;} 25% {left: -100%;} 30% {left: -200%;} 40% {left: -200%;} 45% {left: -300%;} 55% {left: -300%;} 60% {left: -200%;} 70% {left: -200%;} 75% {left: -100%;} 85% {left: -100%;} 90% {left: 0%;} } .button { position: absolute; bottom: 3%; left: 50%; width: 1.3rem; height: 1.3rem; background-color: red; border-radius: 50%; border: 0.2rem solid #d38800; outline: none; cursor: pointer; transform: translateX(-50%); z-index: 70; } .button-1 { left: 20%; } .button-2 { left: 25%; } .button-3 { left: 30%; } .button-4 { left: 35%; } .button-1:focus~.wrapper { animation: none; left: 0%; } .button-2:focus~.wrapper { animation: none; left: -100%; } .button-3:focus~.wrapper { animation: none; left: -200%; } .button-4:focus~.wrapper { animation: none; left: -300%; } .button:focus { background-color: black; } </style> </head> <body> <div class= "box"> <h1 class= "title"> Responsive Carousel using CSS </h1> <div class= "content"> <div class= "carousel-content"> </div> <div class= "slideshow"> <button class= "button button-1"> </button> <button class= "button button-2"> </button> <button class= "button button-3"> </button> <button class= "button button-4"> </button> <div class= "wrapper"> <div class= "slide"> <img class= "img" src= "https://www.tutorialspoint.com/static/images/simply-easy-learning.jpg" alt="如何借助CSS創建一個旋轉木馬?" > </div> <div class= "slide"> <img class= "img" src="https://wallpapercave.com/wp/wp2782600.jpg" alt="如何借助CSS創建一個旋轉木馬?" > </div> <div class= "slide"> <img class= "img" src="https://i.insider.com/5fd90e7ef773c90019ff1293? style="max-width:90%" alt="如何借助CSS創建一個旋轉木馬?" > </div> <div class= "slide"> <img class= "img" src="https://wallpaperaccess.com/full/1164582.jpg" alt="如何借助CSS創建一個旋轉木馬?" > </div> </div> </div> </div> </div> </body> </html>
要修改視覺格式模型所使用的座標空間,請使用CSS中的transform屬性。透過這樣做,可以對元素應用傾斜、旋轉和平移等效果。
transform: none| transform-functions| initial| inherit;
translate(x, y) − 此函數定義了沿著X和Y座標的平移。
translate3d(x, y, z) − 此函數提供了沿著X、Y和Z座標軸的平移。
initial − 將元素設為其預設值。
inherit − 它繼承父元素的值。
CSS的animation屬性允許我們在一定的時間間隔內更改元素的各種樣式屬性,從而為它添加動畫效果。
動畫的一些特性如下:
Animation-name - 它允許我們指定動畫的名稱,後續由@keyframes使用該名稱來指定要執行該動畫的CSS規則。
動畫持續時間 - 設定動畫的持續時間
動畫時間函數 - 表示動畫的速度曲線,即動畫從一組CSS自訂屬性變化到另一組所使用的時間間隔。
Animation-delay – 在給定的時間間隔內為起始值設定延遲
@keyframes用於指定在給定的時間段內動畫中需要執行的程式碼。這是透過在動畫期間為某些特定的「幀」聲明CSS屬性來實現的,百分比從0%(動畫的開始)到100%(動畫的結束)。
以上是如何借助CSS創建一個旋轉木馬?的詳細內容。更多資訊請關注PHP中文網其他相關文章!