使用CSS3線性漸變實現圖片閃光劃過的效果

作者：狐靈科技 | 2019-12-29 17:07 |點擊：

當鼠標移上去的時候，會有一道閃光在圖片上劃過，效果挺酷炫的。于是把這個效果再實現一下。

大體思想是，設計一個透明層i，skewx在X軸上做了負25度的變形，背景顏色用的是線性漸變linear-gradient，然后hover的時候，設置0.5s的動畫時間。

同時在 i 層使用 cursor:pointer，如果不設置這個的話，需要等透明層動畫之后才能看得到 pointer 指針。

HTML 如下：

<html>
<head></head>
<body>
    <p class="overimg"> 
        <a><img src="images/01.jpg" /></a> 
        <i class="light"></i> 
    </p>
</body>
</html>

CSS 為：

.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:1.5s;
    -o-transition:1.5s;
    -webkit-transition:1.5s;
    transition:1.5s;
}

如沒特殊注明，文章均為狐靈科技原創,轉載請注明?? "使用CSS3線性漸變實現圖片閃光劃過的效果

多一份參考，總有益處

聯系狐靈科技，免費獲得專屬《策劃方案》及報價

咨詢相關問題或預約面談，可以通過以下方式與我們聯系

業務熱線：15082661954 / 大客戶專線：15523356218

關于狐靈科技

狐靈致力于互聯網品牌建設與網絡營銷，專業領域包括網站建設、 SEO優化、移動互聯網營銷、高端網站建設、高端網站設計、品牌網站定制開發、營銷策劃推廣電子商務、移動互聯網營銷、為不同類型的客戶提供良好的互聯網應用定制解決方案，我們將策略和執行緊密結合，且不斷評估并優化我們的方案，為客戶提供一體化全方位的互聯網品牌整合方案！

我們的優勢

量身打造個性化網站制作

代碼深度符合SEO優化

一站式企業網站建設服務

前沿視覺設計、研發能力

重慶網站建設公司

多項網站設計傳播大獎

營銷型網站建設專家

自主研發網站管理系統

B2C電商網站建設供應商

完善的售后服務體系

我們的不同

在我們的對手消耗大量的時間停留在碎片化的互聯網設計或者程序實現的時候，我們已經開始把數字化品牌建設和網絡傳播進行了整合。我們提供從前期的網站品牌分析策劃、網站設計、創意表現、系統開發以及后續網站運營反饋建議等一系列服務，幫助企業打造創新的互聯網品牌經營模式與有效的網絡營銷方法,為所有謀求長遠發展的企業品牌貢獻全力！

友情鏈接交換友情鏈接 交換友情鏈接 展開

公司地址：重慶市九龍坡楊家坪重百大樓21-8 | 業務熱線：15082661954

專業團隊為您提供重慶網頁設計, 品牌網站設計,營銷型網站制作,SEO優化關鍵詞排名推廣等服務,建網站就找狐靈科技！ | TAG標簽 | 網站建設地圖 | 網站地圖

精品国产免费观看久久久_久久天天躁狠狠躁夜夜爽_无码人妻少妇久久中文字幕_狠狠做深爱婷婷久久综合一区

首頁

網站建設

優化推廣

案例

方案

電商平臺

微信營銷

資訊

我們

聯系

精準傳達 ? 價值共享

查看其它板塊

使用CSS3線性漸變實現圖片閃光劃過的效果

熱門標簽

多一份參考，總有益處

聯系狐靈科技，免費獲得專屬《策劃方案》及報價

業務熱線：15082661954 / 大客戶專線：15523356218

關于狐靈科技

我們的優勢

我們的不同

友情鏈接交換友情鏈接 交換友情鏈接 展開

網站建設

Website Building

推廣優化

Seo

案例

Site case

方案

Solutions

電商網站開發

E-commerce & System

我們

About Us

聯系

Contact Us

精準傳達 ? 價值共享

查看其它板塊

使用CSS3線性漸變實現圖片閃光劃過的效果

熱門標簽

多一份參考，總有益處

聯系狐靈科技，免費獲得專屬《策劃方案》及報價

業務熱線：15082661954 / 大客戶專線：15523356218

關于狐靈科技

我們的優勢

我們的不同

友情鏈接 交換友情鏈接 交換友情鏈接 展開

友情鏈接交換友情鏈接交換友情鏈接展開