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

焦點輪播圖示例

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

焦點圖實現效果展示

1、實現的基本思路

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

2、animation與@keyframe

通過使用CSS3提供的animation屬性方法，我們可以編寫動畫，實現元素的移動、放縮、顏色改變等動畫效果。Animation主要屬性包括綁定動畫的名稱、執行動畫的實踐、動畫啊延遲等相關屬性。基本語法如下：

對應屬性值分別為動畫名稱、執行時間、速度曲線、延遲時間、執行次數、是否反向播放；

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

3、transform:translateX

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

4、改變背景background-image

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

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

素材縮略圖

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

整體頁面文件代碼

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

頁面布局效果

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

CSS動畫部分代碼

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

元素樣式代碼

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