溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關怎么使用css3+html5來制作文字霓虹燈效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
使用css3+html5來制作文字霓虹燈效果的特點
文字帶有閃爍的霓虹燈動畫，且文字選中時也有很酷的動畫特效；
文字可動態輸入，且輸入的文字實時渲染霓虹燈特效。
使用css3+html5來制作文字霓虹燈效果的步驟
輸入需要加入特效的文本。
利用box-shadow的多層陰影屬性，繪制霓虹管的立體效果。
利用text-shadow多層陰影，繪制文字燈管，發光，投影，達到設置立體文字的效果。
這里我們著重介紹一下實現霓虹燈閃爍效果的原理
我們需要在文本上設置兩個標簽，并且讓他們完全重合，上層實現燈管效果，下層實現光暈效果，再利用選擇器使其不斷閃爍，同時我們需要設置熄滅和點亮兩個狀態的text-shadow屬性值，使他們以不同速度的切換，就形成了霓虹燈閃爍的效果。
注意：如有對于以上內容不理解的小伙伴可以查看本站內其他文章
如何使用css3實現圖片的簡單陰影效果（附完整代碼）
如何使用css3實現字體內發光效果（詳解）
使用css3+html5來制作文字霓虹燈效果的代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3 html5文字霓虹燈交替閃爍效果</title>
<style>html, body, div, span, applet, object, iframe,
h2, h3, h4, h5, h6, h7, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
background-color: #222;
background-image: -webkit-radial-gradient(circle, #333, #222, #111);
background-attachment: fixed;
overflow: hidden;
font-family: 'Wire One', sans-serif;
font-size: 6em;
color: #FFF;
line-height: normal;
text-align: center;
}
#glow {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 1em;
margin: auto;
display: block;
}
#glow p,
#glow span{
display: inline-block;
color: #FFF;
text-shadow: 0 0 15px;
}
#glow p:nth-child(odd) {
-webkit-animation: bglow .3s ease infinite;
}
#glow p:nth-child(even) {
-webkit-animation: rglow .3s ease infinite;
}
@-webkit-keyframes bglow {
0% {
color: rgb(0, 135, 211);
text-shadow: 0 0 15px;
}
}
@-webkit-keyframes rglow {
100% {
color: rgb(233, 54, 40);
text-shadow: 0 0 15px;
}
}
</style>
<script>
window.confirm = function(){};
window.prompt = function(){};
window.open = function(){};
window.print = function(){};
// Support hover state for mobile.
if (false) {
window.ontouchstart = function(){};
}
</script>
</head>
<body>
<section id="glow">
<p>P</p>
<p>H</p>
<p>P</p>
<p>中</p>
<p>文</p>
<p>網</p>
</section>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage('resize', "*");
}
</script>
</body>
</html>總結
剛開始以為文字霓虹燈效果是gif動畫之類的，審查元素發現居然是用html5 + CSS3動畫實現的，頓時激起了我的(hao)欲(qi)望(xin)，決定要一探究竟，查看代碼之后，發現原理居然是如此簡單，希望本文內容可以為大家帶來幫助。
關于怎么使用css3+html5來制作文字霓虹燈效果就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
