現在的互聯網上,網頁設計的方案和內容越來越多樣化。CSS3 的出現為網頁設計帶來了更豐富、更絢麗的效果。以下是一些好的 CSS3 效果,可以幫助您創造一個令人難忘的網站。
/* 1.3D Flip 效果 */ .flip-container { perspective: 1000px; display: inline-block; } .flipper { transition: 0.6s; transform-style: preserve-3d; position: relative; } .flipper:hover .front { transform: rotateY(-180deg); } .flipper:hover .back { transform: rotateY(0deg); } .front, .back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; } .back { transform: rotateY(-180deg); } /* 2.逐漸加載效果 */ .loading { border: 5px solid #f3f3f3; border-radius: 50%; border-top: 5px solid #3498db; width: 30px; height: 30px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
以上代碼展示了兩種 CSS3 效果。第一個是 3D 翻轉效果,通過使用 perspective、transform 等屬性,可以實現卡片翻轉的效果。第二個是逐漸加載效果,使用了 CSS3 的動畫特性,通過旋轉圓圈來顯示加載進度。
CSS3 的功能非常強大,可以實現多種多樣的效果。如果您想要在網站中增加一些引人注目的效果,嘗試使用 CSS3 的新特性吧!
上一篇css邊框顏色線性漸變
下一篇好看的單選樣式css