如何使用css3+html5來製作文字霓虹燈效果（付完整代碼）
- 坏嘻嘻原創
- 2018-09-30 10:12:584676瀏覽
在科技日益發展的今天，人們對於美學越來越挑剔，這就要求我們對於前端開發的態度更加的嚴謹的同時，需要加入新鮮的元素，以達到吸引目光的目的。那麼今天本文帶大家來了解如何使用css3 html5來製作文字霓虹燈效果，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
使用css3 html5來製作文字霓虹燈效果的特點
文字帶有閃爍的霓虹燈動畫，且文字選取時也有酷炫的動畫特效；
文字可動態輸入，且輸入的文字即時渲染霓虹燈特效。
使用css3 html5來製作文字霓虹燈效果的步驟
輸入需要加入特效的文字。
利用box-shadow的多層陰影屬性，畫出霓虹管的立體效果。
利用text-shadow多層陰影，繪製文字燈管，發光，投影，達到設定立體文字的效果。
-
這裡我們著重介紹實現霓虹燈閃爍效果的原理
我們需要在文字上設定兩個標籤，並且讓他們完全重合，上層實現燈管效果，下層實現光暈效果，再利用選擇器使其不斷閃爍，同時我們需要設定熄滅和點亮兩個狀態的text-shadow屬性值，使他們以不同速度的切換，就形成了霓虹燈閃爍的效果。
注意：如有對於以上內容不理解的小夥伴可以查看本站內其他文章
使用css3 html5來製作文字霓虹燈效果的程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3 html5文字霓虹灯交替闪烁效果</title>
<style>html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, 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來製作文字霓虹燈效果（付完整代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn