我們將使用一個無序列表的幻燈片,我們會添加一個跨度為每個圖像和一個標題:

• Image 01

  re·lax·a·tion

讓我們首先定義無序列表的樣式。這將是固定的。我們還將使用:在偽元素以地方模式的圖片:.cb-slideshow,.cb-slideshow:after { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; }.cb-slideshow:after { content: ''; background: transparent url(../images/pattern.png) repeat top left; }我們將使用一個重復的點模式,但你也可以使用,例如,一個css梯度與一些透明度。將包含一個幻燈片圖像定位絕對有100%的寬度和高度。因為我們有一些文本內部,我們將使顏色透明,因為我們不想看到它。background-size屬性值“cover”將確保元素的背景圖像覆蓋所有的區域,因此它是屏幕的大小。.cb-slideshow li span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: 0; animation: imageAnimation 36s linear infinite 0s; }每個跨度的動畫將持續6秒,運行一個inifinite次數。但讓我們來看看細節,首先,我們將與整體風格劃分:.cb-slideshow li div { z-index: 1000; position: absolute; bottom: 30px; left: 0px; width: 100%; text-align: center; opacity: 0; color: #fff; animation: titleAnimation 36s linear infinite 0s; }.cb-slideshow li div h3 { font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; font-size: 240px; padding: 0; line-height: 200px; }標題的動畫還將持續6秒。現在,我們將為所有的跨越和定義背景圖片動畫延遲,因此每個幻燈片圖片和標題后出現前一個的6秒后:.cb-slideshow li:nth-child(1) span { background-image: url(../images/1.jpg) }.cb-slideshow li:nth-child(2) span { background-image: url(../images/2.jpg); animation-delay: 6s; }.cb-slideshow li:nth-child(3) span { background-image: url(../images/3.jpg); animation-delay: 12s; }.cb-slideshow li:nth-child(4) span { background-image: url(../images/4.jpg); animation-delay: 18s; }.cb-slideshow li:nth-child(5) span { background-image: url(../images/5.jpg); animation-delay: 24s; }.cb-slideshow li:nth-child(6) span { background-image: url(../images/6.jpg); animation-delay: 30s; } .cb-slideshow li:nth-child(2) div { animation-delay: 6s; }.cb-slideshow li:nth-child(3) div { animation-delay: 12s; }.cb-slideshow li:nth-child(4) div { animation-delay: 18s; }.cb-slideshow li:nth-child(5) div { animation-delay: 24s; }.cb-slideshow li:nth-child(6) div { animation-delay: 30s; }現在,讓我們看一下幻燈片的動畫。每個將動畫時間跨度6秒。在6秒時我們將從0到1改變不透明度動畫達到8%。然后這種透明度得到保持,直到17%。當達到25%不透明度應該已經0又保持到最后。現在,為什么這些值?我們希望每個圖像可見6秒鐘,我們知道,一個周期結束時,我們希望第一個圖像顯示一次。@keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 }}標題,我們有相同的理由,我們希望它消失更快一點,因此,不透明度19%:@keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 }}瀏覽器不支持動畫,我們將簡單地顯示過去的幻燈片圖像通過跨度的不透明度設置為1:.no-cssanimations .cb-slideshow li span{ opacity: 1;}Modernizr no-cssanimations類添加。讓我們照顧標題的字體大小視窗時小。我們將使用媒體查詢,以設置在特定寬度較小字體大小:@media screen and (max-width: 1140px) { .cb-slideshow li div h3 { font-size: 140px }}@media screen and (max-width: 600px) { .cb-slideshow li div h3 { font-size: 80px }}這是所有的簡單版本幻燈片!現在,讓我們看看我們如何轉換有點增添情趣。選擇動畫的例子現在,我們可以一起玩有點標題顯示圖像和動畫。下面的動畫會讓圖像擴大一點,稍微旋轉:@keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; transform: scale(1.05); animation-timing-function: ease-out; } 17% { opacity: 1; transform: scale(1.1) rotate(3deg); } 25% { opacity: 0; transform: scale(1.1) rotate(3deg); } 100% { opacity: 0 }}從正確的標題將下滑(我們不得不改變標題的text-align部門“正確的”),向左滑動和消失,消失:@keyframes titleAnimation { 0% { opacity: 0; transform: translateX(200px); } 8% { opacity: 1; transform: translateX(0px); } 17% { opacity: 1; transform: translateX(0px); } 19% { opacity: 0; transform: translateX(-400px); } 25% { opacity: 0 } 100% { opacity: 0 }}

總結

以上是生活随笔為你收集整理的html背景幻灯片图片,CSS3全屏背景图像幻灯片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。