大家好，我是 Just，這里是「設計師工作日常」，今天分享的是利用 animation 動畫實現一個閃爍的霓虹燈文字效果。
《有趣的css》系列最新實例通過公眾號「設計師工作日常」發布。
目錄
- 整體效果
- 核心代碼
- html 代碼
- css 部分代碼
- 完整代碼如下
- html 頁面
- css 樣式
- 頁面渲染效果
整體效果
利用
animation動畫設置關鍵幀參數，再設置不同的延遲時間，達到一個閃爍的效果。
此效果可適用于一些文字入口、游戲類網站文字顯示效果等場景。
核心代碼部分，簡要說明了寫法思路；完整代碼在最后，可直接復制到本地運行。
核心代碼
html 代碼
<div class="light23"><div class="title23"><span>鴻</span><span>星</span><span>爾</span><span>克</span></div><div class="info23"><span>to be number one</span></div>
</div>
頁面搭建鴻星爾克品牌名稱以及它耳熟能詳的的slogan “To Be Number One”。
css 部分代碼
.light23{cursor: default;
}
.title23{color: #eaeaea;font-size: 32px;font-weight: 900;
}
.info23{color: #eaeaea;font-size: 16px;letter-spacing: 1px;text-transform: capitalize; /* 設置英文首字母大寫 */
}
.light23:hover .title23 span{animation: light 0.4s ease forwards; /* 設置 forwards 屬性，讓動畫保持在最后一個值 */
}
.light23:hover .title23 span:nth-of-type(2){animation-delay: .14s;
}
.light23:hover .title23 span:nth-of-type(3){animation-delay: .42s;
}
.light23:hover .title23 span:nth-of-type(4){animation-delay: .78s;
}
@keyframes light{10%,30%,50%{color: #eaeaea;text-shadow: none;}20%,40%,60%{color: #318BF6;text-shadow: 0px 0px 20px #1ABFED,0px 0px 40px #1ABFED,0px 0px 60px #1ABFED;}100% {color: #318BF6;text-shadow:0px 0px 20px #1ABFED,0px 0px 40px #1ABFED,0px 0px 60px #1ABFED;}
}
.light23:hover .info23 span{animation: light 0.4s ease forwards;animation-delay: 1s;
}
利用
animation動畫在關鍵幀中設置不同的顯示效果，然后不同的元素設置animation-delay加上不同的延遲時間，形成閃爍的視覺效果。
注意：設置 animation 動畫時，animation-fill-mode 要設置為 forwards，以使動畫執行完后保持在最后的狀態不變。
完整代碼如下
html 頁面
<!DOCTYPE html>
<html lang="zh"><head><meta charset="utf-8"><link rel="stylesheet" href="style.css"><title>閃爍的霓虹燈文字</title></head><body><div class="app"><div class="light23"><div class="title23"><span>鴻</span><span>星</span><span>爾</span><span>克</span></div><div class="info23"><span>to be number one</span></div></div></div></body>
</html>
css 樣式
/** style.css **/
.app{width: 100%;height: 100vh;background-color: #ffffff;position: relative;display: flex;justify-content: center;align-items: center;
}
.light23{cursor: default;
}
.title23{color: #eaeaea;font-size: 32px;font-weight: 900;
}
.info23{color: #eaeaea;font-size: 16px;letter-spacing: 1px;text-transform: capitalize;
}
.light23:hover .title23 span{animation: light 0.4s ease forwards;
}
.light23:hover .title23 span:nth-of-type(2){animation-delay: .14s;
}
.light23:hover .title23 span:nth-of-type(3){animation-delay: .42s;
}
.light23:hover .title23 span:nth-of-type(4){animation-delay: .78s;
}
@keyframes light{10%,30%,50%{color: #eaeaea;text-shadow: none;}20%,40%,60%{color: #318BF6;text-shadow: 0px 0px 20px #1ABFED,0px 0px 40px #1ABFED,0px 0px 60px #1ABFED;}100%{color: #318BF6;text-shadow:0px 0px 20px #1ABFED,0px 0px 40px #1ABFED,0px 0px 60px #1ABFED;}
}
.light23:hover .info23 span{animation: light 0.4s ease forwards;animation-delay: 1s;
}
頁面渲染效果
以上就是所有代碼，以及簡單的思路，希望對你有一些幫助或者啟發。
[1] 原文閱讀
CSS 是一種很酷很有趣的計算機語言，在這里跟大家分享一些 CSS 實例 Demo，為學習者獲取靈感和思路提供一點幫助，希望你們喜歡。
我是 Just，這里是「設計師工作日常」，求點贊求關注！
