CSS3是一種用于Web頁面樣式設計的技術,其中包括了豐富的樣式屬性和效果,比如鼠標移入圖片效果。下面是一個簡單的例子:
/* HTML結構 */ <div class="pic"> <img src="image.jpg" alt="示例圖片"> </div> /* CSS樣式 */ .pic { position: relative; display: inline-block; } .pic:hover::before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); } .pic:hover img { opacity: 0.7; } .pic:hover::after { content: "查看大圖"; display: inline-block; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); padding: 5px 10px; background: #fff; color: #000; font-size: 14px; border: 1px solid #000; }
上面的代碼演示了一個簡單的鼠標移入效果,當鼠標懸浮在圖片上時,圖片的透明度降低,并在圖片上加上半透明的遮罩層和一個提示文字。
在這個例子中,我們使用了偽元素before和after來實現效果。before偽元素用于添加遮罩層,after偽元素用于添加提示文字。注意,在遮罩層和提示文字的CSS樣式中,我們使用了絕對定位和z-index屬性,以避免遮擋其他元素。
總之,CSS3中是實現鼠標移入圖片效果的多種方法,開發人員可以根據自己的需求和興趣,選擇適合自己的方法和實現方式。