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

焦點輪播圖示例

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

焦點圖實現(xiàn)效果展示

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

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

2、animation與@keyframe

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

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

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

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

3、transform:translateX

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

transform:translateX(-1000px);

4、改變背景background-image

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

background-image:url('images/1.jpg');CSS3動畫實現(xiàn)焦點圖效果實現(xiàn)

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

素材縮略圖

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

整體頁面文件代碼

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

頁面布局效果

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

CSS動畫部分代碼

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

元素樣式代碼

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

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

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

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

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

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

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