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

This article is about how to use pure CSS3 to make music stage special effects. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Front-end code

# effect-background {

Position: relative

Margin: auto

Margin-top: 40px

Width: 450px

Height: 300px

Overflow: hidden

}

# effect-background > .bg {

Position: absolute

Display: block

Left: 0

Top: 0

Margin: auto

Width: 1200px

Animation: moveX 20s linear 0s infinite alternate

-webkit-animation: moveX 20s linear 0s infinite alternate

}

# effect-background > .bg img {

Position: absolute

Left: 0

Top: 0

Width: 100%

Animation: moveY 10s linear 2s infinite alternate

-webkit-animation: moveY 10s linear 2s infinite alternate

}

# effect-background > .mask {

Position: absolute

Display: block

Left: 0

Right: 0

Top: 0

Bottom: 0

Margin: auto

Background: radial-gradient (

Circle at 200px 120px

Transparent 18%

Rgba (0,0,0,0.6) 26%

)

No-repeat

Background-size: 100%

}

@ keyframes moveX {

From {

Left: 0

Transform: translateX (0)

-webkit-transform: translateX (0)

-moz-transform: translateX (0)

-ms-transform: translateX (0)

-o-transform: translateX (0)

}

To {

Left: 450px

Transform: translateX (- 100%)

-webkit-transform: translateX

-moz-transform: translateX

-ms-transform: translateX

-o-transform: translateX

}

}

@ keyframes moveY {

From {

Top: 0

Transform: translateY (0)

-webkit-transform: translateY (0)

-moz-transform: translateY (0)

-ms-transform: translateY (0)

-o-transform: translateY (0)

}

To {

Top: 300px

Transform: translateY (- 100%)

-webkit-transform: translateY

-moz-transform: translateY

-ms-transform: translateY

-o-transform: translateY

}

}

Thank you for reading! This is the end of this article on "how to use pure CSS3 to make music stage special effects". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can 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.