CSS可以為圖片添加一些特效,使它們更加醒目,更加美觀。以下是一些常用的圖片展現特效。
/* 圖片漸變 */ img { transition: opacity 0.3s ease-in-out; } img:hover { opacity: 0.8; } /* 圖片縮放 */ img { transition: all 0.3s ease-in-out; } img:hover { transform: scale(1.2); } /* 圖片旋轉 */ img { transition: all 0.3s ease-in-out; } img:hover { transform: rotate(20deg); } /* 圖片陰影 */ img { transition: all 0.3s ease-in-out; box-shadow: 2px 2px 2px rgba(0,0,0,0.2); } img:hover { box-shadow: 5px 5px 5px rgba(0,0,0,0.5); }
以上展現的是一些常見的圖片特效,它們通過CSS的transition和transform屬性來完成動畫效果,還有用box-shadow屬性來實現圖片的陰影效果。在實際開發中,可以根據需要進行定制。