HTML5+CSS3做一个有动画跳动发光的文字效果
生活随笔
收集整理的這篇文章主要介紹了
HTML5+CSS3做一个有动画跳动发光的文字效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
純HTML5+CSS3制作的一個超級酷的字體發光效果 ，知識點不多，只需用到 文字陰影+模糊濾鏡+動畫延遲。
首先給大家康康效果圖：
?文章的最后小編放上了效果訪問的URL，感興趣的可以看看！！
?如果有朋友們不喜歡太亮的文本陰影，那么可以在css中可以除掉文字陰影。
在關鍵幀最后這個位置加上
text-shadow:none。
?5%,
? 95% {
? ? color: #111;
? ? filter: blur(0px);
? ??text-shadow: none;?
? }
HTML 代碼區：
<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1.0" /><title>會發光的字體</title><link rel="stylesheet" href="css/style.css" /></head><body><div class="container"><span>s</span><span>u</span><span>p</span><span>e</span><span>r</span><span>c</span><span>o</span><span>o</span><span>l</span></div></body> </html>css 代碼塊：
* {margin: 0;padding: 0; } .container {height: 100vh;display: flex; /* 彈性布局,水平，垂直居中*/justify-content: center;align-items: center;background: #333; } span {font-size: 100px;font-weight: bold;text-transform: uppercase; /* 轉為大寫*/letter-spacing: 5px; /* 字間距*/color: #111;filter: blur(2px); /* 模糊濾鏡*/animation: animate 2.5s linear infinite; /* 動畫：動畫名稱 動畫時長 線性的 無限次播放*/ } /* 為每一個span元素設置動畫延遲時間*/ span:nth-child(1) {animation-delay: 0s; } span:nth-child(2) {animation-delay: 0.25s; } span:nth-child(3) {animation-delay: 0.5s; } span:nth-child(4) {animation-delay: 0.75s; } span:nth-child(5) {animation-delay: 1s; } span:nth-child(6) {animation-delay: 1.25s; } span:nth-child(7) {animation-delay: 1.5s; } span:nth-child(8) {animation-delay: 1.75s; } span:nth-child(9) {animation-delay: 2s; } @keyframes animate {/* 定義動畫關鍵幀*/0%,100% {color: #fff;filter: blur(2px); /*模糊濾鏡*/text-shadow: 0 0 10px #32ff7e, 0 0 20px #32ff7e, 0 0 30px #32ff7e,0 0 40px #32ff7e, 0 0 100px #32ff7e, 0 0 200px #32ff7e;}5%,95% {color: #111;filter: blur(0px);} }接下來小編附上URL：
https://static-f758fb91-f450-4acc-879e-93a020848816.bspapp.com/
ps: 訪問速度可能有點小慢，希望朋友們稍稍等待一小會兒，小編太窮了，資金不支持，只能用免費的服務器上傳。
總結
以上是生活随笔為你收集整理的HTML5+CSS3做一个有动画跳动发光的文字效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： poi文件解析
- 下一篇： HTML5开发环境PhoneGap视频教