老規(guī)矩，先看最終效果，如果值得學(xué)習(xí)，記得幫忙點(diǎn)個(gè)贊哦！??！

實(shí)現(xiàn)思路

設(shè)置一個(gè)容器，用來(lái)顯示圖片內(nèi)容，彩色環(huán)就是錐形漸變r(jià)epeating-conic-gradient()實(shí)現(xiàn)的，詳情看下方源碼。

四張圖片圍繞同一個(gè)中心點(diǎn)旋轉(zhuǎn)，給四張圖片統(tǒng)一設(shè)置旋轉(zhuǎn)中心，方便固定旋轉(zhuǎn)位置，示意圖。

旋轉(zhuǎn)中心設(shè)置，方便設(shè)置旋轉(zhuǎn)動(dòng)畫(huà)，動(dòng)畫(huà)生效后四張圖片形成360度旋轉(zhuǎn)，示意圖

整體旋轉(zhuǎn)示意圖

準(zhǔn)備素材

1. 一個(gè)div容器，包裹四張圖片；

2. 四張圖片；

3. 基礎(chǔ)樣式。

四張圖片

基礎(chǔ)樣式

設(shè)置容器container樣式

添加容器基本屬性和偽類(lèi)遮罩層效果樣式。

設(shè)置每張圖片基本樣式

設(shè)置圖片動(dòng)畫(huà)和延時(shí)

刷新瀏覽器，大功告成