這篇文章給大家分享的是有關css3實現圖片光影效果的方法的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。
首先我們要知道本篇文章中css3實現圖片光影效果需要用到transition屬性和transform屬性。
下面我們簡單看一下transition屬性和transform屬性這兩個屬性。
transition屬性是一個簡寫屬性，用于設置四個過渡屬性：
transition-property：規定設置過渡效果的 CSS 屬性的名稱。
transition-duration ：規定完成過渡效果需要多少秒或毫秒。
transition-timing-function：規定速度效果的速度曲線。
transition-delay：定義過渡效果何時開始。
transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。
看完了這兩個屬性后，我們就來直接看css3圖片光影實現的代碼：
思路：設置一個透明層i，skewx在X軸上做了負25度的變形，背景顏色用的是CSS3的線性漸變linear-gradient，然后hover的時候，設置0.5s的動畫時間。同時在 i 層使用 cursor:pointer，如果不設置這個的話，需要等透明層動畫之后才能看得到 pointer 指針。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="">
.overimg {
position: relative;
display: block; /* overflow: hidden;*/
-webkit-box-shadow: 0 0 10px #FFF;
box-shadow: 0 0 10px #FFF; /* overflow: hidden;*/
}
.light {
cursor: pointer;
position: absolute;
left: -100px;
top: 0;
width: 180px;
height: 90px;
background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
background-image: -o-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
background-image: -ms-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
background-image: linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
-webkit-transform: skewx(-25deg);
-moz-transform: skewx(-25deg);
-o-transform: skewx(-25deg);
-ms-transform: skewx(-25deg);
transform: skewx(-25deg);
}
.overimg:hover .light {
left: 180px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}
}
</style>
</head>
<body>
<p class="overimg">
<a><img src="images/pandas.jpg" width="300px" height="150px"></a>
<i class="light"></i>
</p>
</body>
</html>css3圖片光影效果如下：
感謝各位的閱讀！關于css3實現圖片光影效果的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
