这篇文章给大家分享的是有关如何使用纯CSS3制作音乐舞台特效的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
前端代码
<div id="effect-background">
<div class="bg">
<img src="/file/upload/202210/19/hpkd32rghu1.jpg"/>
</div>
<div class="mask"></div>
</div>
#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% 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(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
}
}
@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(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
}
}
感谢各位的阅读！关于“如何使用纯CSS3制作音乐舞台特效”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
