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

This article mainly introduces "how to achieve dynamic text masking background effects in HTML5". In daily operation, I believe many people have doubts about how to achieve dynamic text masking background effects in HTML5. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to achieve dynamic text masking background effects in HTML5". Next, please follow the editor to study!

Mouse over the mask text background animation effect

The final effect of the first effect is as follows, put it up with the mouse to see:

Welcome to htmleaf.com

HTML structure

Welcome to Codicode

CSS style

Body

{

Background-color:#fff

}

# bkDiv

{

/ / The rainbow Css3 pattern

Background: linear-gradient (0deg, transparent 0% recorder # 31009c 10%, # 000084 25% recollection 009cff 37% meme 00bd00 50% meme fffff70062% meme 6331 75% meme de0000 90% meme 100%)

Background-color: # 333

Background-size: 10px 125px

Background-repeat: repeat

Height: 100px

Width: 620px

Background-position:center-65px

Transition: background-position 1s

}

# bkDiv:hover

{

/ / on Hover the background translates 65px down

Background-position:center 0px

}

# theText

{

Font-family:Impact, Charcoal, sans-serif

Font-size:65px

Stroke:#000

Stroke-width:3px

Fill-opacity:0.5

}

Div, which is used as a background, is slipped by the mouse, and the CSS3 background will produce transition animation. When the mouse slides out, the origin of the background will return to its original position. The time to animate the transition here is 1 second.

In addition, the text has 50% transparency and a 3-pixel stroke, which makes the text look better.

Mask text background continuous animation effect

Let's first take a look at the masking text background animation effect of the second Disco effect:

Night CLUB

The second HTML code to mask the text background animation effect is the same as the first example:

HTML structure

Welcome to Codicode

CSS style

Body

{

Background-color:#fff

}

# bkDiv

{

/ / Red dots Css3 pattern

Background: linear-gradient (- 45deg, # 036 30%, 45%, 55%, 036, 70%)

Linear-gradient (45deg, # 036 30%, 45%, 55%, 036, 70%)

Background-color: # f00

Background-size: 15px 15px

Background-position:0px 0px

Height:150px

Width:550px

/ / Animating red dots (infinite loop)

Animation: cAnim 1s linear 0s infinite

}

@ keyframes cAnim

{

100% {background-position:15px 0px;}

}

# theText

{

Font-family:Impact, Charcoal, sans-serif

Font-size:120px

Stroke:#000

Stroke-width:5px

Fill-opacity:0.1

Stroke-opacity:1

/ / Strobe light effect animation

Animation: cAnim1 0.5s linear 0s infinite

}

@ keyframes cAnim1

{

100% {fill-opacity:0.9;stroke-opacity:0.5;}

}

In the second example, two animations are performed at the same time, the first animation is to move the dot on the background, and the second animation is to perform a flicker effect on the border of the SVG text.

At this point, the study on "how to achieve dynamic text masking background effects in HTML5" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.