How to use pure CSS3 to make music stage special effects
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!
