CSS3實現一個效果酷炫的閃光特效程式碼
- 零下一度原創
- 2017-05-03 13:55:596137瀏覽
當滑鼠移上去的時候，會有一道閃光在圖片上劃過，效果挺酷炫的。於是把這個效果再實現一下：
大體思想是，設計一個透明層我，skewx在X軸上做了負25度的變形，背景顏色用的是CSS3的線性漸變linear-gradient，然後hover的時候，設定0.5s的動畫時間。
同時在i層使用cursor：pointer，如果不設定這個的話，需要等透明層動畫之後才能看到
會更清楚！
<！DOCTYPE html >
<html xmlns =“www.php.cn/1999/xhtml”>
<head>
<meta http-equiv =“Content-Type”content =“text / html; charset = utf-8”/>
<title>闪光图片</ title>
<style>
.overimg {
位置：亲戚;
显示：块;
/ * overflow：hidden; * /
box-shadow：0 0 10px #FFF;
}
。光{
cursor：pointer;
位置：绝对
左：-180px;
顶部：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））;
变换：skewx（-25deg）;
-o-transform：skewx（-25deg）;
-moz变换：skewx（-25deg）;
-webkit-transform：skewx（-25deg）;
}
.overimg：hover .light {
左：180px;
-moz-transition：0.5s;
-o-transition：0.5s;
-webkit转换：0.5s;
过渡：0.5s;
}
</ style>
</ head>
<body>
<p class =“overimg”>
<a> <img src =“www.php.cn/librarys/images/201402/2014_02_15_01.jpg”> </a>
<i class =“light”> </ i>
</ p>
</ body>
</ html>以上是CSS3實現一個效果酷炫的閃光特效程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn