css3如何實現圖片光影效果？ css3圖片光影實現的方法介紹-css教學-PHP中文網

首頁

web前端

css教學

css3如何實現圖片光影效果？ css3圖片光影實現的方法介紹

不言

Oct 10, 2018 pm 03:16 PM

css3

在學習css3的過程中，我們知道css3新增的一些屬性可以很容易就能夠實現某些好看的效果，這篇文章將為大家介紹一個特別的效果—圖片光影效果。什麼是圖片光影效果呢？我們有時可以在網頁中看到一張圖片當你滑鼠放到這張圖片上的時候就會在圖片上劃過一道光影，這就是光影效果，感覺是不是非常的有趣，這就可以用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="/static/imghwm/default1.png"  data-src="images/pandas.jpg"  class="lazy"      style="max-width:90%" height="150px" alt="css3如何實現圖片光影效果？ css3圖片光影實現的方法介紹" ></a>
    <i class="light"></i>
</p>
</body>
</html>

css3圖片光影效果如下：

css3如何實現圖片光影效果？ css3圖片光影實現的方法介紹