您好,登錄后才能下訂單哦!
今天幫朋友看一效果,看到了手標滑過圖片變為彩色的效果,很簡單又兼容各大瀏覽器的,無非是準備兩張圖,一張黑白,一張彩色,滑過切換背景圖或直接切換圖片方法,當然,誰也不想這么復雜操作。
下面用css3安排下:
給標簽加上下方css代碼,即可變為黑白,也就是去色
filter: grayscale(100%);
filter: gray;
安排下兼容寫法
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
如果要做滑過變為彩色,舉個列子,網站頁面一排排圖片,均加了上方代碼,變為黑白的,然后滑過讓恢復顏色,如下方代碼
初始代碼
img{
filter: grayscale(100%);
filter: gray;
}
滑過代碼
img :hover{
filter: grayscale(0);
filter: none;
}
整個網站頁面變為黑白色,直接加給 html 即可安排
本文詳情 http://www.sharedblog.cn/?post=186
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。