如何使用纯CSS3制作音乐舞台特效

这篇文章给大家分享的是有关如何使用纯CSS3制作音乐舞台特效的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联建站专注于企业全网营销推广、网站重做改版、独山网站定制设计、自适应品牌网站建设、html5、购物商城网站建设、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为独山等各大城市提供网站开发制作服务。

前端代码

#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制作音乐舞台特效”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！