成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

IntMain / 1886人閱讀

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

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

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

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

我們先實(shí)現(xiàn)一個(gè)簡(jiǎn)單的文字描邊動(dòng)畫：


    
        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í)使用多個(gè)描邊動(dòng)畫，并設(shè)置不同的animation-delay：


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

注意：要使用多少種顏色，就放多少個(gè)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...

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/112519.html

相關(guān)文章

  • SVG

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

    104828720 評(píng)論0 收藏0

  • CSS相關(guān)文章

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

    FrozenMap 評(píng)論0 收藏0

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

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

    noONE 評(píng)論0 收藏0

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

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

    TigerChain 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<