CSS平滑切換效果是一種非常常見的網頁設計技巧,可以使得頁面元素之間的轉換更為流暢自然,提高用戶的交互體驗。下面就介紹一些常用的CSS平滑切換效果:
/* 透明度漸變 */ .fade { transition: opacity 0.5s ease-in-out; } .fade:hover { opacity: 0.5; } /* 寬度變化 */ .width { transition: width 0.5s ease-in-out; } .width:hover { width: 200px; } /* 高度變化 */ .height { transition: height 0.5s ease-in-out; } .height:hover { height: 200px; } /* 過渡背景色 */ .bg-color { transition: background-color 0.5s ease-in-out; } .bg-color:hover { background-color: #ff0000; } /* 翻轉效果 */ .flip { transform-style: preserve-3d; transition: transform 0.5s ease-in-out; } .flip:hover { transform: rotateY(180deg); }
CSS平滑切換效果可以應用到按鈕、圖片、導航條等元素上,提高用戶對頁面的操作感受。但需要注意的是,過多的動效會影響頁面的加載速度和用戶的體驗,應謹慎使用。