怎么用css實(shí)現(xiàn)一道閃光在圖片上劃過的特效

發(fā)布時(shí)間：2021-08-07 22:14:23 來源：億速云閱讀：189 作者：chen 欄目：web開發(fā)

本篇內(nèi)容介紹了“怎么用css實(shí)現(xiàn)一道閃光在圖片上劃過的特效”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

在百度音樂 http://music.baidu.com/ 看到這么一個(gè)圖片效果，當(dāng)鼠標(biāo)移上去的時(shí)候，會(huì)有一道閃光在圖片上劃過，效果挺酷炫的。于是把這個(gè)效果再實(shí)現(xiàn)一下：
大體思想是，設(shè)計(jì)一個(gè)透明層i，skewx在X軸上做了負(fù)25度的變形，背景顏色用的是CSS3的線性漸變linear-gradient，然后hover的時(shí)候，設(shè)置0.5s的動(dòng)畫時(shí)間。
同時(shí)在 i 層使用 cursor:pointer，如果不設(shè)置這個(gè)的話，需要等透明層動(dòng)畫之后才能看得到 pointer 指針。
打開 fireBUG 調(diào)試來看會(huì)更加清楚!

代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>閃光圖片</title>
<style>
.overimg{
position: relative;
display: block;
/* overflow: hidden; */
box-shadow: 0 0 10px #FFF;
}
.light{
cursor:pointer;
position: absolute;
left: -180px;
top: 0;
width: 180px;
height: 90px;
background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
transform: skewx(-25deg);
-o-transform: skewx(-25deg);
-moz-transform: skewx(-25deg);
-webkit-transform: skewx(-25deg);
}
.overimg:hover .light{
left:180px;
-moz-transition:0.5s;
-o-transition:0.5s;
-webkit-transition:0.5s;
transition:0.5s;
}
</style>
</head>
<body>
<p class="overimg">
<a><img src="https://cache.yisu.com/upload/information/20210311/295/14817.jpg"></a>
<i class="light"></i>
</p>
</body>
</html>

“怎么用css實(shí)現(xiàn)一道閃光在圖片上劃過的特效”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問一下細(xì)節(jié)

怎么用css實(shí)現(xiàn)一道閃光在圖片上劃過的特效

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽