5分鐘教你學會超簡單的html+css魔幻霓虹燈文字特效
更新時間：2023年03月27日 16:06:47 作者：北極光之夜。
這篇文章5分鐘教你學會超簡單的html+css魔幻霓虹燈文字特效,只用簡單的html+css就可以完成,不需要配置運行環(huán)境,魔幻的霓虹燈特效非常炫酷,一起來學習一下,需要的朋友可以參考下
話不多，先看效果：
今天繼續(xù)分享簡單但有趣的CSS創(chuàng)意特效~
這個效果很簡單看一分鐘就明白了~
初學前端的小伙伴們拿來練手是很不錯的~
實現(xiàn)過程（完整源碼在最后）：
1. 定義h3標簽：
<h3>Aurora Borealis night</h3>
2. 給個body背景色：
body{
background-color: rgb(4, 15, 36);
}
3. 設(shè)置h3基本樣式：
h3{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
text-align: center;
font-size: 3em;
text-transform: uppercase;
letter-spacing: 10px;
color: rgb(4, 15, 36);
-webkit-box-reflect: below 1px linear-gradient(transparent ,rgb(218, 218, 218));
animation: san 6s linear infinite;
}
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%); 居中對齊。先left與top 50%，再偏移自身長度與寬度50%達到居中。
text-align: center; 文字居中。
text-transform: uppercase; 字母變?yōu)榇髮憽?br />letter-spacing: 10px; 每個字符間距離。
-webkit-box-reflect: 倒影效果。
animation: san 6s linear infinite; 定義動畫。
4.定義動畫，就是設(shè)置不同時間段顯示不同顏色等實現(xiàn)閃爍霓虹燈效果~時間可以自己調(diào)自己要的效果：
@keyframes san{
0%,15%,50%,52%,70%,90%,99.1%{
color: rgb(4, 15, 36);
filter: blur(2px);
}
12%,15.1%,60%,70.1%,90.5%,100%{
color: rgb(255, 255, 255);
text-shadow: 0 0 5px rgb(22, 138, 216),
0 0 25px rgb(22, 138, 216),
0 0 35px rgb(22, 138, 216),
0 0 105px rgb(22, 138, 216),
0 0 155px rgb(22, 138, 216);
filter: blur(0px);
}
}
filter: blur(2px); 模糊
text-shadow: 0 0 5px rgb(22, 138, 216),
0 0 25px rgb(22, 138, 216),
0 0 35px rgb(22, 138, 216),
0 0 105px rgb(22, 138, 216),
0 0 155px rgb(22, 138, 216);
文字陰影。寫多行是為了陰影疊加，效果更亮。
完整源碼：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: rgb(4, 15, 36);
}
h3{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
text-align: center;
font-size: 3em;
text-transform: uppercase;
letter-spacing: 10px;
color: rgb(4, 15, 36);
-webkit-box-reflect: below 1px linear-gradient(transparent ,rgb(218, 218, 218));
animation: san 6s linear infinite;
}
@keyframes san{
0%,15%,50%,52%,70%,90%,99.1%{
color: rgb(4, 15, 36);
filter: blur(2px);
}
12%,15.1%,60%,70.1%,90.5%,100%{
color: rgb(255, 255, 255);
text-shadow: 0 0 5px rgb(22, 138, 216),
0 0 25px rgb(22, 138, 216),
0 0 35px rgb(22, 138, 216),
0 0 105px rgb(22, 138, 216),
0 0 155px rgb(22, 138, 216);
filter: blur(0px);
}
}
</style>
</head>
<body>
<h3>Aurora Borealis night</h3>
</body>
</html>
到此這篇關(guān)于5分鐘教你學會超簡單的html+css魔幻霓虹燈文字特效的文章就介紹到這了,更多相關(guān)html+css霓虹燈文字特效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
鼠標滑過文章中的鏈接文字，要在相應(yīng)位置彈出提示框，提示框的樣式由css來控制，高度自適應(yīng)；鼠標可以點擊提示框的中的鏈接,滑離提示框時，框自動消失2010-06-06
用過qq空間的朋友應(yīng)該對這個很熟悉吧,效果蠻炫的,不過它們是用flash實現(xiàn)的,那么javascript可不可以呢,需要的朋友可以了解下2012-12-12
為什么說它是智能滾動呢？因為如果我們在布局網(wǎng)頁的時候，預留的滾動區(qū)域太小的話，有可能文字會有一部分看不到，本款代碼可以智能判斷區(qū)域大小，如果不夠顯示文字，那么它會控制文字做相應(yīng)的左右滾動.2009-10-10
讓瀏覽器窗口中的滾動條打破常規(guī)出現(xiàn)在網(wǎng)頁的左側(cè)，記得在藏文的一些網(wǎng)站，經(jīng)?？吹骄W(wǎng)頁滾動條居左，不知為何居左，可能是某些人群的使用習慣吧。
2010-09-09 
文字如何實現(xiàn)打字的效果呢?在瀏覽網(wǎng)頁的時候也經(jīng)常能看到這種效果。本節(jié)給出了一個打字效果的文字特效，文字一個一個地打印在頁面上。
2011-01-01 
走馬燈效果的鏈接提示，大家的需求不一樣，因此可能有朋友會喜歡這樣的鏈接提示，用到的話，再好好美化一下，其實效果還是不錯的。
2009-10-10 
網(wǎng)頁上跳動的文字，代碼稍復雜，效果挺可愛的，一跳一跳的文字，真逗人！
2009-10-10 
這篇文章5分鐘教你學會超簡單的html+css魔幻霓虹燈文字特效,只用簡單的html+css就可以完成,不需要配置運行環(huán)境,魔幻的霓虹燈特效非常炫酷,一起來學習一下,需要的朋友可以參考下
2023-03-03 
為了提高用戶體驗和易用度，一些設(shè)計師會對網(wǎng)頁中用戶經(jīng)常用的東西進行優(yōu)化，比如輸入框。一般的輸入框是怎樣優(yōu)化的呢？從用戶體驗的角度出發(fā)，簡化用戶使用步驟，讓用戶用得更方便就是提高了易用性
2015-09-09