CSS3中的放大退出效果,可以通過設置transform: scale()
的值來實現。當元素顯示時,設置一個縮放比例,當元素隱藏時,再將縮放比例還原為1。
.zoom-in-out{
transition: transform 0.3s ease-in-out;
}
.zoom-in-out.show{
transform: scale(1.5);
}
上述代碼設置了一個縮放的動畫,在元素顯示時,縮放比例為1.5,動畫時間為0.3秒,緩動效果為ease-in-out。當元素顯示時,為元素添加show
類名即可。
下面是出場時的逆向效果,同樣是通過設置縮放比例并使用過渡動畫實現。在元素從頁面中消失時,將縮放比例設置為0,達到逐漸變小的效果。
.zoom-out{
transition: transform 0.4s ease;
}
.zoom-out.hide{
transform: scale(0);
}
同樣,在元素消失時,為元素添加hide
類名即可。
通過CSS3的transform屬性,我們可以輕松地實現放大退出效果,不需要javascript的幫助,也不需要復雜的動畫制作軟件。當然,如果需要更復雜的效果,我們也可以將CSS3和javascript結合起來使用。
上一篇css3 搜索框代碼
下一篇css3 改高度