Jquery中文網 www.2030036.live
Jquery中文網 >  CSS教程  >  經典實例  >  正文 css實現文字發光效果方法匯總

css實現文字發光效果方法匯總

發布時間:2020-05-07   編輯:www.2030036.live
jquery中文網為您提供css實現文字發光效果方法匯總等資源,歡迎您收藏本站,我們將為您提供最新的css實現文字發光效果方法匯總資源
文字發光效果我們可以直接使用css來實現了今天我們來看一篇關于文字發光效果的例子,希望這篇文章能夠幫助到各位朋友哦。

前言

我錄制的慕課網視頻一直沒有上線,慕課網的消息說是可能加入就業課程或者系列課程。有可能年底上線,我等的花兒都謝了!因此,我昨天在看慕課網時,發現他們確實改版了,實戰頁面有圖片掃光效果,地址我就不列了!感覺這個效果還蠻不錯,其實,我之前也做過類似的效果。今天借著這個引子,來和大家一起探討一下圖片的掃光效果吧!

思路

其實掃光的思路都是一樣的,不外乎是表層一個動態的光,從左往右進行一個動畫運動!

但是這個運動的光,一般是用過偽元素來::after或者::before來實現的。

然后我們對這個偽元素用css的漸變gradient進行處理。

文字掃光

廢話少說,我們接下來實現一個簡單的掃光文字!

 代碼如下 復制代碼

  .sample{
    background-color: #0E1326;
    padding-top:30px;
    overflow: hidden;
  }
  .blank_text{
    position: relative;
    width:200px;
    margin:20px auto;
    color: #fff;
    line-height: 1;
    font-size: 50px;
    font-size: 0.74074rem;
    text-align: center;
    overflow: hidden;
    font-family: "icomoon";
  }
.blank_text:after{
    width: 300%;
    height: 100%;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(15,20,40, 0.7)), color-stop(0.4, rgba(15,20,40, 0.7)), color-stop(0.5, rgba(15,20,40, 0)), color-stop(0.6, rgba(15,20,40, 0.7)), color-stop(1, rgba(15,20,40, 0.7)));
    -webkit-animation: slide ease-in-out 2s infinite;
}
@-webkit-keyframes slide{
    0%{-webkit-transform:translateX(-66.666%);}
    100%{-webkit-transform:translateX(0);}

html代碼如下:

<div class="sample">
    <div class="blank_text">haorooms博客掃光測試</div>
</div>

預覽效果如下:


圖片掃光

慕課網是通過鼠標移上去,偽類位置發生變化,通過如下代碼:

 代碼如下 復制代碼
.banner-bg .banner-box .right-pic:hover::before {
  -webkit-transition: left .8s;
  -moz-transition: left .8s;
  transition: left .8s;
  left: 480px;
}

位置發生改變。

我們不用慕課網的方式,我這里也簡單的實現一下!

如下:


css代碼如下:

 代碼如下 復制代碼
@keyframes aniBlink {
from {
margin-left:-440px
}
to {
    margin-left:500px
}
}
@-webkit-keyframes aniBlink {
from {
margin-left:-440px
}
to {
    margin-left:500px
}
}
.logo {
    position:relative;
    width:440px;
    height:160px;
    overflow:hidden;
}
.logo a {
    display:inline-block
}
.logo a:before {
    content:'';
    position:absolute;
    width:60px;
    height:160px;
    margin-top:0px;
    margin-left:-440px;
    overflow:hidden;
    z-index:6;
  overflow: hidden;
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(255, 255, 255, 0)));
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
  background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
  -webkit-transform: skewX(-25deg);
  -moz-transform: skewX(-25deg);
}
.logo:hover a:before {
 -webkit-animation:aniBlink .8s ease-out forwards;
 -moz-animation:aniBlink .8s ease-out forwards;
 -o-animation:aniBlink .8s ease-out forwards;
 animation:aniBlink .8s ease-out forwards
}

html代碼如下:

 代碼如下 復制代碼
<div class="logo">
    <a href="http://www.111cn.net"><img src="/0y89gzo2/banner03.jpg" /></a>
</div>

當然我們也可以用慕課網的那種位置偏移來做,都可以!

您可能感興趣的文章:
CSS 陰影效果(無需圖片即可實現)
基于jQuery制作迷你背詞匯工具
jQuery 動態酷效果實現總結
js中光標定位的方法
jQuery使用技巧簡單匯總
jQuery實現可拖動的浮動層完整代碼
PostgreSQL從菜鳥到專家系列教程(1)PostgreSQL介紹
JQuery上傳插件Uploadify使用詳解及錯誤處理
js光標定位的實例代碼
php 當前時間、時間戳的獲取方法匯總

[關閉]
888棋牌金花app 湖南快乐十分前三直选 彩票研究高手论坛 2012杭州文商配资 河北十一选五中奖规则 时时彩官网 中原风采22选5走势图 玩腾讯分分彩大小方法 北京十一选五一定牛基本走势 杠杆炒股平台 江苏十一选五开奖结果丶