|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
純CSS3實(shí)現(xiàn)圖片/logo/文字掃光效果【演示/源碼下載】
作者:admin 時(shí)間:2022-3-26 10:56:52 瀏覽:圖片/文字掃光效果使用作圖工具制作并不難，如果你有興趣，可參考Firefox用蒙版組合實(shí)現(xiàn)文字掃光效果，不過本文要介紹的是，使用純CSS3來實(shí)現(xiàn)圖片/文字掃光效果，而實(shí)現(xiàn)起來代碼也不多，非常容易修改使用。
我們先看看下面幾張效果圖：
下面是完整的HTML代碼
<!DOCTYPE html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.ilogo {
position: relative;
float: left;
margin: 18px 0 0 5px;
overflow: hidden;
}
.ititle {
/* font-size: 50px; */ /**文字大小**/
}
.ilogo:before {
content: "";
position: absolute;
width: 1000px;
height: 30px; /**白光的寬度，可根據(jù)實(shí)際調(diào)整**/
background-image: linear-gradient(to bottom,transparent,rgba(255,255,255,.5),transparent);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: searchLights 3s ease-in 1s infinite;
-o-animation: searchLights 3s ease-in 1s infinite;
animation: searchLights 3s ease-in 1s infinite; /**第一個(gè)數(shù)字參數(shù)控制掃光速度，數(shù)字越大越慢**/
}
@keyframes searchLights {
0% {
left: -200px;
top: -300px;
}
100% {
left: -160px;
top: 800px;
}
}
</style>
</head>
<body>
<div class="ilogo">
<h1 class="ititle">
<a href="#">
<img src="logo.png"/>
</a>
</h1>
</div>
</body>
</html>
代碼解釋
1、用 CSS3 偽元素 :bfore 或 :after 添加一個(gè)掃光層；
2、用 transform:rotate(-45deg) 旋轉(zhuǎn) 45 度；
3、@keyframes 是控制掃光效果的起始位置(0%)和結(jié)束位置(100%)；
4、animation屬性是定義動(dòng)畫的運(yùn)動(dòng)方式、運(yùn)動(dòng)時(shí)間等。示例中searchLights是動(dòng)畫集名稱，3s是動(dòng)畫(掃光)時(shí)間，ease-in是運(yùn)動(dòng)方式(加速運(yùn)動(dòng))，1s是動(dòng)畫延遲(執(zhí)行)時(shí)間，infinite是無限循環(huán)運(yùn)動(dòng)。關(guān)于animation的動(dòng)畫屬性，可以參考如下文章了解更多：
5、示例是圖片掃光效果，如果你要實(shí)現(xiàn)文字掃光效果，那么把HTML里的圖片標(biāo)簽<img ...>改為文字即可，你還可以通過定義h1的類.ititle的CSS屬性，設(shè)置文字的大小、顏色等屬性。
相關(guān)文章
標(biāo)簽: 掃光效果 文字動(dòng)畫 文字漸變
相關(guān)文章
x
- 站長推薦
