国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

使用SVG + CSS實(shí)現(xiàn)動態(tài)霓虹燈文字效果

IntMain / 1818人閱讀

摘要：早上無意間進(jìn)入一個網(wǎng)站，看到他們的效果略屌，如圖剛開始以為是動畫之類的，審查元素發(fā)現(xiàn)居然是用動畫實(shí)現(xiàn)的，頓時激起了我的欲望，決定要一探究竟，查看代碼之后，發(fā)現(xiàn)原理居然是如此簡單多個描邊動畫使用不同的即可對于一個形狀元素或文本元素，可以使用

早上無意間進(jìn)入一個網(wǎng)站，看到他們的LOGO效果略屌，如圖：

剛開始以為是gif動畫之類的，審查元素發(fā)現(xiàn)居然是用SVG + CSS3動畫實(shí)現(xiàn)的，頓時激起了我的(hao)欲(qi)望(xin)，決定要一探究竟，查看代碼之后，發(fā)現(xiàn)原理居然是如此簡單：多個SVG描邊動畫使用不同的animation-delay即可！

對于一個形狀SVG元素或文本SVG元素，可以使用stroke-dasharray來控制描邊的間隔樣式，并且可以用stroke-dashoffset來控制描邊的偏移量，借此可以實(shí)現(xiàn)描邊動畫效果，更具體的資料可以看看張大神的《純CSS實(shí)現(xiàn)帥氣的SVG路徑描邊動畫效果》

我們先實(shí)現(xiàn)一個簡單的文字描邊動畫：


    
        segmentfault.com
    
 
.text{
    font-size: 64px;
    font-weight: bold;
    text-transform: uppercase;
    fill: none;
    stroke: #3498db;
    stroke-width: 2px;
    stroke-dasharray: 90 310;
    animation: stroke 6s infinite linear;
}
@keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

演示地址：http://output.jsbin.com/demic...

然后我們同時使用多個描邊動畫，并設(shè)置不同的animation-delay：


    
        segmentfault.com
    
    
        segmentfault.com
    
    
        segmentfault.com
    
    
        segmentfault.com

注意：要使用多少種顏色，就放多少個text

.text{
    font-size: 64px;
    font-weight: bold;
    text-transform: uppercase;
    fill: none;
    stroke-width: 2px;
    stroke-dasharray: 90 310;
    animation: stroke 6s infinite linear;
}
.text-1{
    stroke: #3498db;
    text-shadow: 0 0 5px #3498db;
    animation-delay: -1.5s;
}
.text-2{
    stroke: #f39c12;
    text-shadow: 0 0 5px #f39c12;
    animation-delay: -3s;
}
.text-3{
    stroke: #e74c3c;
    text-shadow: 0 0 5px #e74c3c;
    animation-delay: -4.5s;
}
.text-4{
    stroke: #9b59b6;
    text-shadow: 0 0 5px #9b59b6;
    animation-delay: -6s;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

大功告成，演示地址：http://output.jsbin.com/vuyuv...

需要注意的幾個點(diǎn)：

各個元素的animation-delay與animation的總時長的設(shè)置要協(xié)調(diào)

stroke-dashoffset與stroke-dasharray的設(shè)置要協(xié)調(diào)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/112519.html

相關(guān)文章

  • SVG

    摘要：目前只提供了一些基礎(chǔ)功能。中與的區(qū)別開發(fā)者第一次接觸手寫那種，雖然很多情況都有設(shè)計(jì)師使用來完成這項(xiàng)工作，但還是不排除需要利用到的每個元素。輕量級，具備靈活的來自團(tuán)隊(duì)，全球非常出名的可視化團(tuán)隊(duì)。于是筆者嘗試著把移植到中。 使用SVG + CSS實(shí)現(xiàn)動態(tài)霓虹燈文字效果 早上無意間進(jìn)入一個網(wǎng)站，看到他們的LOGO效果略屌，如圖： 剛開始以為是gif動畫之類的，審查元素發(fā)現(xiàn)居然是用SVG + ...

    104828720 評論0 收藏0

  • CSS相關(guān)文章

    摘要：如何用獲取虛擬鍵盤高度前端早讀課月號早讀文章由湯谷投稿分享。大殺器和把動畫轉(zhuǎn)換成原生動畫初來乍到，本文搬運(yùn)自我月份在知乎發(fā)的文章。 前端面試之 CSS3 新特性 除了 HTML5 的新特性，CSS3 的新特性也是面試中經(jīng)常被問到的。 如何用 js 獲取虛擬鍵盤高度？-前端早讀課 9月7號早讀文章由@湯谷投稿分享。正文從這開始～ 這是一個存在很久的歷史問題了，對于這樣一個具有普遍性的問題...

    FrozenMap 評論0 收藏0

  • 前端每日實(shí)戰(zhàn)：100# 視頻演示如何用純 CSS 創(chuàng)作閃閃發(fā)光的霓虹燈文字

    摘要：效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽?？山换ヒ曨l此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbe2O1?w=400&h=299); 效果預(yù)覽 按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。 https://codepen.io/comehop...

    noONE 評論0 收藏0

  • 前端每日實(shí)戰(zhàn)：100# 視頻演示如何用純 CSS 創(chuàng)作閃閃發(fā)光的霓虹燈文字

    摘要：效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽?？山换ヒ曨l此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbe2O1?w=400&h=299); 效果預(yù)覽 按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。 https://codepen.io/comehop...

    TigerChain 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<