css鼠標(biāo)經(jīng)過(guò)圖片放大代碼(css鼠標(biāo)移動(dòng)到圖片上 圖片放大顯示)
transform scale105使用css3的trasnform屬性做的放大效果,圖片并不是背景是img標(biāo)簽讀出的圖片。
使用 `transform` 屬性的 `scale` 函數(shù),通過(guò)設(shè)置比例實(shí)現(xiàn)圖片的放大效果 當(dāng)鼠標(biāo)懸停在 `imagecontainer` 元素上時(shí),應(yīng)用 `transform scale12` 的樣式,使圖片放大通過(guò)以上 CSS 樣式,當(dāng)鼠標(biāo)懸停在圖片容器上時(shí),圖片會(huì)以近大遠(yuǎn)小的效果緩慢放大,鼠標(biāo)移開(kāi)時(shí)則恢復(fù)原始大小可以根據(jù)。
這位網(wǎng)友你好,百度圖片鼠標(biāo)放上去放大的效果用的是css3的新屬性,如下圖但是現(xiàn)在一些低版本的瀏覽器并不支持,有些瀏覽器需要加特有的前綴百度中可以看紅框中的代碼代碼示例imghover transformscale1515指的是放大的倍數(shù)。
1新建html文檔2在head里插入鏈接和圖片樣式,表示鼠標(biāo)經(jīng)過(guò)時(shí)圖片放大,代碼如下 a #bigwidth800pxheight480px a #bighover width1200pxheight720px 3在body里插入,表示設(shè)置一個(gè)有鏈接的圖片,引用圖片放大樣式4在IE里測(cè)試鼠標(biāo)離開(kāi)時(shí)圖片正常,鼠標(biāo)經(jīng)過(guò)時(shí)圖片放大。
lt!DOCTYPE html CSS3鼠標(biāo)滑過(guò)圖片放大特效DEMO演示 htmlfontfamilysansserifmstextsizeadjust100%webkittextsizeadjust100%bodymargin0article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summarydisplayblockaudio,canvas。
掃描二維碼推送至手機(jī)訪問(wèn)。
版權(quán)聲明:本文由飛速云SEO網(wǎng)絡(luò)優(yōu)化推廣發(fā)布,如需轉(zhuǎn)載請(qǐng)注明出處。