溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關(guān)如何使用純CSS3制作音樂舞臺(tái)特效的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。
前端代碼
<div id="effect-background">
<div class="bg">
<img src="https://cache.yisu.com/upload/information/20220117/488/18158.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%);
}
}
感謝各位的閱讀！關(guān)于“如何使用純CSS3制作音樂舞臺(tái)特效”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
