CSS3動(dòng)畫方形背景

.box{
width:300px;
height:300px;
position:relative;
overflow:hidden;
}
.square{
position:absolute;
width:50px;
height:50px;
background-color:#73AD21;
animation: square-animation 3s infinite;
}
@keyframes square-animation{
0%{
transform:translate(0,0);
}
25%{
transform:translate(250px,0);
}
50%{
transform:translate(250px,250px);
}
75%{
transform:translate(0,250px);
}
100%{
transform:translate(0,0);
}
}

最近，CSS3動(dòng)畫方形背景正在網(wǎng)頁設(shè)計(jì)中變得越來越流行，它可以通過使用CSS3動(dòng)畫制作出類似方格跳動(dòng)的動(dòng)態(tài)效果，從而提升網(wǎng)頁的視覺效果。方形背景可以通過CSS的position屬性實(shí)現(xiàn)對背景的加入，方格可以通過CSS的動(dòng)畫屬性，如animation屬性進(jìn)行設(shè)計(jì)，細(xì)心的用戶還可以使用@keyframes屬性制作出更為復(fù)雜的動(dòng)畫效果。因此，這種方法可以作為網(wǎng)頁美化的一種良好實(shí)踐。