HTML5+CSS3做一个有动画跳动发光的文字效果
生活随笔
收集整理的這篇文章主要介紹了
HTML5+CSS3做一个有动画跳动发光的文字效果
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
純HTML5+CSS3制作的一個(gè)超級(jí)酷的字體發(fā)光效果 ，知識(shí)點(diǎn)不多，只需用到 文字陰影+模糊濾鏡+動(dòng)畫(huà)延遲。
首先給大家康康效果圖：
?文章的最后小編放上了效果訪問(wèn)的URL，感興趣的可以看看！！
?如果有朋友們不喜歡太亮的文本陰影，那么可以在css中可以除掉文字陰影。
在關(guān)鍵幀最后這個(gè)位置加上
text-shadow:none。
?5%,
? 95% {
? ? color: #111;
? ? filter: blur(0px);
? ??text-shadow: none;?
? }
HTML 代碼區(qū)：
<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1.0" /><title>會(huì)發(fā)光的字體</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; /* 轉(zhuǎn)為大寫(xiě)*/letter-spacing: 5px; /* 字間距*/color: #111;filter: blur(2px); /* 模糊濾鏡*/animation: animate 2.5s linear infinite; /* 動(dòng)畫(huà)：動(dòng)畫(huà)名稱 動(dòng)畫(huà)時(shí)長(zhǎng) 線性的 無(wú)限次播放*/ } /* 為每一個(gè)span元素設(shè)置動(dòng)畫(huà)延遲時(shí)間*/ 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 {/* 定義動(dòng)畫(huà)關(guān)鍵幀*/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);} }接下來(lái)小編附上URL：
https://static-f758fb91-f450-4acc-879e-93a020848816.bspapp.com/
ps: 訪問(wèn)速度可能有點(diǎn)小慢，希望朋友們稍稍等待一小會(huì)兒，小編太窮了，資金不支持，只能用免費(fèi)的服務(wù)器上傳。
總結(jié)
以上是生活随笔為你收集整理的HTML5+CSS3做一个有动画跳动发光的文字效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： poi文件解析
- 下一篇： 基于ssm框架—微信小程序开发的会议管理