純CSS特效已經成為現代Web設計中最流行的技術之一。無論是從UI/UX、動畫、效果甚至是響應式設計方面的需求,純CSS特效都提供了無限的可能性。下面是一些常用的純CSS特效,供您參考。
/* 定義一個樣式 */ .box { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f2f2f2; }
1. 懸停效果
懸停效果可以幫助展示您的網站上的重要內容,并為用戶提供更好的使用體驗。下面是一些常用的懸停效果:
/* 開始一個hover效果 */ a:hover { color: #fff; background-color: #333; }
2. 輪播圖效果
輪播圖效果可以讓您在網站上展示多個圖片或產品,幫助吸引用戶的視線并轉化用戶。下面是一些常用的輪播圖效果:
/* CSS3 輪播圖實現 */ @keyframes carousel { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
3. 滾動效果
滾動效果可以為您的網站增加一些動態效果,使其更加活潑和吸引人。下面是一些常用的滾動效果:
/* 滾動翻轉效果 */ .card { transform-style: preserve-3d; } .card:hover { transform: rotateY(180deg); }
4. 折疊菜單效果
折疊菜單效果可以幫助您在有限的頁面空間內展示更多的選項,并使用戶更加方便地查找所需的信息。下面是一些常用的折疊菜單效果:
/* CSS3 折疊菜單實現 */ .collapse { max-height: 0; overflow: hidden; transition: max-height 0.25s ease-in-out; } .collapse.show { max-height: 200px; }
總之,以上僅是純CSS特效的冰山一角,您可以在網絡上找到更多的事例,以及自己創造更加獨特的純CSS特效來提升您的網站設計。