Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.