現在的網頁設計已經不再單純地只是文字和圖片的組合,而是需要有更為絢麗多彩的動畫效果來吸引用戶的眼球。在CSS3中,我們可以通過攝像頭模型的動畫特效來使網頁的設計更為生動。
.camera { position: relative; width: 100px; height: 100px; perspective: 500px; } .camera .lens { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; transform-style: preserve-3d; animation: rotate 5s infinite linear; } .camera .lens:before { content: ""; position: absolute; z-index: 1; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; background: #fff; border-radius: 50%; } .camera .flash { position: absolute; left: 100%; top: 0; width: 0; height: 100%; background: #fff; animation: flash 5s infinite linear; } @keyframes rotate { from { transform: rotateY(0); } to { transform: rotateY(360deg); } } @keyframes flash { from { width: 0; } to { width: 100%; } }
在代碼中首先定義了一個camera樣式,包含了相機的位置,寬高及透視。在相機樣式里面我們還定義了鏡頭lens的初始位置、樣式及特效——transform-style: preserve-3d是保持3D變換的狀態,animation: rotate 5s infinite linear是每次旋轉360度并無限循環,使得網頁呈現旋轉的效果。同時我們還定義了一個圖像閃光flash,并使用了動畫特效使其每次都由無到有地閃現。
實際應用中,我們可以將該動畫效果應用在網頁的頂部橫幅、登錄框、菜單導航等各個部分,以增強頁面美感和實用性,吸引用戶的關注。
上一篇css3動畫旋轉軸
下一篇css3動畫時間控制