焦點(diǎn)圖主要是指網(wǎng)頁焦點(diǎn)位置的圖片，一般焦點(diǎn)圖可以是單張圖，也可以是一組動(dòng)態(tài)切換的圖片的組合。由于處在終端用戶視覺焦點(diǎn)位置因此焦點(diǎn)圖的作用至關(guān)重要，焦點(diǎn)圖也成為網(wǎng)站首頁面設(shè)計(jì)的重點(diǎn)。焦點(diǎn)圖樣式如下所示：

焦點(diǎn)輪播圖示例

常用實(shí)現(xiàn)焦點(diǎn)圖或者輪播圖的前端技術(shù)較多，如JavaScript技術(shù)、BootStrap組件、CSS技術(shù)等。本文主要介紹使用CSS3提供的動(dòng)畫功能實(shí)現(xiàn)簡單輪播效果。首先給出輪播實(shí)現(xiàn)動(dòng)畫效果如下所示：

焦點(diǎn)圖實(shí)現(xiàn)效果展示

1、實(shí)現(xiàn)的基本思路

本例題設(shè)計(jì)實(shí)現(xiàn)圖文輪播，主要包括圖片的輪播與文字輪播兩部分，基本思路是實(shí)現(xiàn)按照周期改變圖層背景實(shí)現(xiàn)圖片的輪播。改變或者移動(dòng)文字圖層位置實(shí)現(xiàn)文字部分的移動(dòng)及動(dòng)畫效果。

2、animation與@keyframe

通過使用CSS3提供的animation屬性方法，我們可以編寫動(dòng)畫，實(shí)現(xiàn)元素的移動(dòng)、放縮、顏色改變等動(dòng)畫效果。Animation主要屬性包括綁定動(dòng)畫的名稱、執(zhí)行動(dòng)畫的實(shí)踐、動(dòng)畫啊延遲等相關(guān)屬性?；菊Z法如下：

對(duì)應(yīng)屬性值分別為動(dòng)畫名稱、執(zhí)行時(shí)間、速度曲線、延遲時(shí)間、執(zhí)行次數(shù)、是否反向播放；

@keyframes與animation結(jié)合使用，主要用于實(shí)現(xiàn)對(duì)動(dòng)畫進(jìn)行定義。通過定義動(dòng)畫時(shí)長的百分比，確定在各個(gè)階段動(dòng)畫的效果。@keyframes定義形式如下：

@keyframe animation_name{ 0%{樣式1} 100%{樣式2}}

3、transform:translateX

該屬性主要用于實(shí)現(xiàn)x軸方向元素的移動(dòng)，需要在使用時(shí)提供參數(shù)值，參數(shù)即為移動(dòng)的值，正負(fù)號(hào)表示移動(dòng)的方向，如：

transform:translateX(-1000px);

4、改變背景background-image

CSS屬性background-image主要用于設(shè)置元素的背景，常用于頁面、圖層的背景圖片的設(shè)置。代碼示例如下：

background-image:url('images/1.jpg');CSS3動(dòng)畫實(shí)現(xiàn)焦點(diǎn)圖效果實(shí)現(xiàn)

本例主要實(shí)現(xiàn)圖文輪播效果，主要素材為輪播圖片，采用了1000*600的圖片5張，輪播周期為20s。圖片縮略圖如下：

素材縮略圖

頁面主要采用div為容器實(shí)現(xiàn)布局，其中輪播圖片所在層為父層，文字部分為子層，子層相對(duì)父層底部定位。根據(jù)圖片尺寸設(shè)置子層寬度為5000，超出部分隱藏。頁面布局代碼如下：

整體頁面文件代碼

頁面基本HTML代碼如上所示，a層為圖片展示層，s層為文字展示層，c類型的div為文字容器層。頁面效果如下所示：

頁面布局效果

動(dòng)畫實(shí)現(xiàn)主要在style css樣式部分進(jìn)行編寫，定義兩個(gè)動(dòng)畫，名稱分別為mymove()與smove()，其中mymove主要用于實(shí)現(xiàn)圖片切換，綁定到父層a上。Smove主要用于實(shí)現(xiàn)文字移動(dòng)，綁定到s子層上。動(dòng)畫實(shí)現(xiàn)部分代碼描述如下：

CSS動(dòng)畫部分代碼

動(dòng)畫實(shí)現(xiàn)部分主要代碼如上所示，通過@keyframe分別對(duì)mymove與smove動(dòng)畫進(jìn)行規(guī)則編寫，最終實(shí)現(xiàn)圖文輪播的效果。本例頁面布局樣式部分代碼如下所示：

元素樣式代碼

本頭條號(hào)長期關(guān)注編程資訊分享；編程課程、素材、代碼分享及編程培訓(xùn)。如果您對(duì)以上方面有興趣或代碼錯(cuò)誤、建議與意見，可以聯(lián)系作者，共同探討。期待大家關(guān)注！相關(guān)文章鏈接如下：

前端開發(fā)-JavaScript DOM動(dòng)態(tài)生成文本框

前端開發(fā)-拼圖游戲（N數(shù)碼問題）A*算法智能求解效果展示

前端設(shè)計(jì)-JavaScript美女拼圖游戲開發(fā)實(shí)例

前端設(shè)計(jì)-教你如何快速繪制HTML5動(dòng)畫

前端設(shè)計(jì)-響應(yīng)式頁面開發(fā)基礎(chǔ)

前端設(shè)計(jì)-Ajax技術(shù)及實(shí)例展示