CSS3是現代網頁設計中必不可少的一部分,它為我們提供了大量的樣式和效果來創造精美的網頁,其中圖片效果是其中的一種。下面我們來看一下如何使用CSS3來創造豐富多彩的圖片效果。
/* 圖片邊框效果 */ img { border: 5px solid #ccc; border-radius: 10px; box-shadow: 0px 0px 10px #999; } /* 圖片濾鏡效果 */ .img-filter { filter: grayscale(50%); /* 其他濾鏡效果 filter: blur(5px); filter: brightness(50%); filter: contrast(150%); filter: invert(100%); filter: sepia(100%); */ } /* 圖片縮放效果 */ .img-zoom { transition: transform 0.5s; } .img-zoom:hover { transform: scale(1.2); } /* 圖片旋轉效果 */ .img-rotate { transition: transform 0.5s; } .img-rotate:hover { transform: rotate(360deg); } /* 圖片翻轉效果 */ .img-flip { transition: transform 0.5s; } .img-flip:hover { transform: scaleX(-1); }
以上是常見的一些圖片效果,我們可以根據實際需求來使用對應的樣式來創造想要的效果。當然,使用CSS3創造出美麗的圖片效果不只限于這些樣式,我們可以結合其他屬性來創造更加豐富多彩的效果。