今天我們來講解一下動畫跳轉(zhuǎn)頁面的CSS代碼!
首先,我們需要先實現(xiàn)一個基本的頁面跳轉(zhuǎn)代碼:
<a href="#">點擊跳轉(zhuǎn)</a>
然后,我們需要使用CSS來實現(xiàn)動畫效果,我們將使用transition屬性:
a {
transition: all 0.3s ease-in-out;
}
現(xiàn)在,當(dāng)我們懸停在鏈接上時,它將通過淡入效果變成透明度為0.5的灰色:
a:hover {
opacity: 0.5;
}
最后,我們需要添加一個簡單的另一個頁面的背景顏色,并在點擊鏈接時使用transition屬性來實現(xiàn)動畫效果:
body {
background-color: #fff;
transition: all 0.3s ease-in-out;
}
a:active {
background-color: #000;
}
這是我們所需的完整代碼:
<a href="#">點擊跳轉(zhuǎn)</a>
<style>
a {
transition: all 0.3s ease-in-out;
}
a:hover {
opacity: 0.5;
}
body {
background-color: #fff;
transition: all 0.3s ease-in-out;
}
a:active {
background-color: #000;
}
</style>
這樣,我們就實現(xiàn)了一個簡單而漂亮的動畫跳轉(zhuǎn)頁面!