How to make text neon effect by css3+html5
This article will explain in detail how to make neon lights in css3+html5. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.
Use css3+html5 to make the code of text neon effect
Css3html5 text neon lights flashing alternately
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
}
/ * HTML5display-roleresetforolderbrowsers*/
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:'WireOne',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
}
# glowp
# glowspan {
Display:inline-block
Color:#FFF
Text-shadow:0015px
}
# glowp:nth-child (odd) {
-webkit-animation:bglow.3seaseinfinite
}
# glowp:nth-child (even) {
-webkit-animation:rglow.3seaseinfinite
}
@-webkit-keyframesbglow {
0% {
Color:rgb (0135211)
Text-shadow:0015px
}
}
@-webkit-keyframesrglow {
100% {
Color:rgb (233, 54, 40)
Text-shadow:0015px
}
}
Window.confirm=function () {}
Window.prompt=function () {}
Window.open=function () {}
Window.print=function () {}
/ / Supporthoverstateformobile.
If (false) {
_ window.ontouchstart=function () {}
}
P
H
P
Medium
Article
Net
If_ (document.location.search.match (/ type=embed/gi)) {
Window.parent.postMessage ('resize', "*")
}
This is the end of the article on "how to make text neon effect in css3+html5". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.
