CSS3技術(shù)為網(wǎng)頁設計帶來了更多的可能性,尤其是在圖片加載方面,通過配合CSS3屬性,可以實現(xiàn)圖片縮放、旋轉(zhuǎn)等效果,為網(wǎng)頁增添更多的視覺效果。
img { /* 圖片縮放 */ width: 50%; /* 圖片寬度為父元素寬度的50% */ height: auto; /* 設置高度自適應 */ }
上面的CSS代碼實現(xiàn)了圖片的縮放效果,其中width屬性設置了圖片的寬度為父元素寬度的50%,而height屬性設置了高度自適應,保證圖片的比例不失真。
img { /* 圖片旋轉(zhuǎn) */ transform: rotate(45deg); /* 圖片旋轉(zhuǎn)45度 */ }
通過CSS3的transform屬性,還可以實現(xiàn)圖片的旋轉(zhuǎn)效果,如上面的代碼所示,設置圖片旋轉(zhuǎn)45度即可。
上一篇css3金幣掉落動畫
下一篇css3鐘擺動畫效果