1. <i id="s6b2k"><small id="s6b2k"></small></i>
    <b id="s6b2k"><bdo id="s6b2k"></bdo></b>
  2. <wbr id="s6b2k"></wbr>

    純CSS實現酷炫的霓虹燈效果(附demo)_CSS教程_CSS_網頁制作

    來源:腳本之家  責任編輯:小易  

    最近關注了油管上的 CSS Animation Effects Tutorial 系列,里面介紹了非常多有意思的 CSS 動效。其中第一個就是很酷炫的霓虹燈效果,這里就實現思路做一個簡單的記錄和分享。

    這是要實現的效果:

    可以看到,在鼠標移入按鈕的時候,會產生類似霓虹燈光的效果;在鼠標移出按鈕的時候,會有一束光沿著固定的軌跡(按鈕外圍)運動。

    霓虹燈光的實現

    霓虹燈光的實現比較簡單,用多重陰影來做即可。我們給按鈕加三層陰影,從內到外每層陰影的模糊半徑遞增,這樣的多個陰影疊加在一起,就可以形成一個類似霓虹燈光的效果。這段的代碼如下:

    HTML:

     <div class="light">
        Neon Button
     </div>
    

    CSS:

    body {
     background: #050901;   
    }
    .light {
      width: fit-content;
      padding: 25px 30px;
      color: #03e9f4;
      font-size: 24px;
      text-transform: uppercase;
      transition: 0.5s;
      letter-spacing: 4px;
      cursor: pointer;
    }
    .light:hover {
      background-color: #03e9f4;
      color: #050801;
      box-shadow: 0 0 5px #03e9f4,
                  0 0 25px #03e9f4,
                  0 0 50px #03e9f4,
                  0 0 200px #03e9f4;
    }
    

    最終的效果如下:

    運動光束的實現

    雖然看起來只有一個光束沿著按鈕的邊緣運動,但實際上這是四個光束沿著不同方向運動之后疊加的效果。它們運動的方向分別是:從左往右、從上往下、從右往左、從下往上,如下圖所示:

    在這個過程中,光束和光束之間產生了交集,如果只看按鈕的邊緣部分,就很像是只有一個光束在做順時針方向的運動。
    下面是具體實現中幾個需要注意的點:

    四個光束分別對應 div.light 的四個子 div,初始位置分別是在按鈕的最左側、最上方、最右側和最下方,并按照固定的方向做重復的運動 每個光束的高度或寬度都很小(只有 2px),并且都有一個從透明色到霓虹色的漸變,因此外表會有一個收束的效果(即看上去不是一條完整的線條) 為了確保我們看到的是一個順時針方向的運動,四個光束的運動實際上是有序的,首先是按鈕上方的光束開始運動,在一段時間后,右側的光束運動,在一段時間后,下方的光束運動,在一段時間后,左側的光束運動。光束和光束之間的運動有一個延遲,以上方和右側的光束為例,如果它們同時開始運動,由于右側的運動距離小于上方的運動距離,就會導致這兩個光束錯過相交的時機,我們看到的就會是斷開的、不連貫的光束。既然右側光束的運動距離比較短,為了讓上方光束可以“追上”它,我們就得讓右側光束“延遲出發”,因此要給它一個動畫延遲;同理,剩余兩個光束也要有一個動畫延遲。多個動畫延遲之間大概相差 0.25 秒即可。 只需要顯示按鈕邊緣的光束就夠了,因此給 div.light 設置一個溢出隱藏

    代碼如下:

    HTML:

    <div class="light">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        Neon Button
    </div>
    

    CSS:

    .light {
      position: relative;
      padding: 25px 30px;
      color: #03e9f4;
      font-size: 24px;
      text-transform: uppercase;
      transition: 0.5s;
      letter-spacing: 4px;
      cursor: pointer;
      overflow: hidden;
    }
    .light:hover {
      background-color: #03e9f4;
      color: #050801;
      box-shadow: 0 0 5px #03e9f4,
                  0 0 25px #03e9f4,
                  0 0 50px #03e9f4,
                  0 0 200px #03e9f4;
    }
    .light div {
      position: absolute;
    }
    .light div:nth-child(1){
      width: 100%;
      height: 2px;
      top: 0;
      left: -100%;
      background: linear-gradient(to right,transparent,#03e9f4);
      animation: animate1 1s linear infinite;
    }
    .light div:nth-child(2){
      width: 2px;
      height: 100%;
      top: -100%;
      right: 0;
      background: linear-gradient(to bottom,transparent,#03e9f4);
      animation: animate2 1s linear infinite;
      animation-delay: 0.25s;
    }
    .light div:nth-child(3){
      width: 100%;
      height: 2px;
      bottom: 0;
      right: -100%;
      background: linear-gradient(to left,transparent,#03e9f4);
      animation: animate3 1s linear infinite;
      animation-delay: 0.5s;
    }
    .light div:nth-child(4){
      width: 2px;
      height: 100%;
      bottom: -100%;
      left: 0;
      background: linear-gradient(to top,transparent,#03e9f4);
      animation: animate4 1s linear infinite;
      animation-delay: 0.75s;
    }
    @keyframes animate1 {
      0% {
        left: -100%;
      }
      50%,100% {
        left: 100%;
      }
    }
    @keyframes animate2 {
      0% {
        top: -100%;
      }
      50%,100% {
        top: 100%;
      }
    }
    @keyframes animate3 {
      0% {
        right: -100%;
      }
      50%,100% {
        right: 100%;
      }
    }
    @keyframes animate4 {
      0% {
        bottom: -100%;
      }
      50%,100% {
        bottom: 100%;
      }
    }
    

    這樣就可以達到文章開頭圖片的效果了。

    不同顏色的霓虹燈

    如果想要其它顏色的霓虹燈光效果怎么辦呢?是否需要把相關的顏色重新修改一遍?其實我們有更簡單的方法,就是使用 filter:hue-rotate(20deg) 一次性修改 div.light 和內部所有元素的色相/色調。

    The hue-rotate() CSS function rotates the hue of an element and its contents.

    最終效果如下:

    到此這篇關于純CSS實現酷炫的霓虹燈效果(附demo)的文章就介紹到這了,更多相關CSS霓虹燈 內容請搜索真格學網以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持真格學網!


  3. 本文相關:
  4. css3.0實現霓虹燈按鈕動畫特效的示例代碼
  5. 這種效果 怎么用DIV+CSS實現 有代碼最好。。。
  6. CSS霓虹燈字體代碼
  7. div+css樣式 如何使css字體樣式能實現發光效果,特...
  8. 用DIV+CSS如何制作出這樣一個網頁的效果
  9. 如何用純css制作動態網頁效果?
  10. 如何實現讓CSS邊框發光的高亮效果
  11. 關于網頁制作網頁的一個問題,這種效果應該怎么做...
  12. css+Js可以達到霓虹燈效果嗎?
  13. 用CSS如何實現這個網頁效果?
  14. 怎樣用CSS樣式制作邊緣光暈的模糊效果
  15. 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全主頁網頁制作csscss教程csscss3.0實現霓虹燈按鈕動畫特效的示例代碼css教程css3div+css教程web標準教程瀏覽器兼容教程css布局實例css控制ul li 的樣式詳解(推薦)html設置超鏈接字體顏色和點擊后的字體顏色div水平垂直居中的完美解決方案css設置各種中文字體如雅黑、黑體、宋體、楷體等等css 文本字體顏色設置方法(css color)css 漂亮搜索框美化代碼css自定義select下拉選擇框的樣式(不用其他標簽模擬)css圓角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行縮進兩個文字css3實現背景圖片半透明內容不透明的方法示例純css實現酷炫的霓虹燈效果(附demo)淺談移動端中的視口(viewport)的具體使用老生常談 使用 css 實現三角形的技巧(多種方法)css中em的正確打開方式詳解css 中多種邊框的實現小竅門使用html+css實現簡易導航欄功能(導航欄遇到鼠標切換html+css 實現簡易導航欄功能簡單的css文字動畫效果css實現的圓形進度欄
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.yu113.com All Rights Reserved
    战天txt全集下载