大學(xué)生網(wǎng)頁設(shè)計(jì)使用css3的transition簡單制作網(wǎng)頁過渡效果

更新時(shí)間：2021-10-25 文章分類：網(wǎng)頁技術(shù)課堂

同學(xué)們在完成網(wǎng)頁設(shè)計(jì)作業(yè)時(shí)，有時(shí)候需要簡單實(shí)現(xiàn)一些簡單的過渡效果，讓網(wǎng)頁在視覺上有響應(yīng)式或互動效果。這個(gè)時(shí)候我們可以使用css3的transition簡單制作網(wǎng)頁過渡效果。transition 屬性是一個(gè)簡寫屬性，可用于設(shè)置以下四個(gè)過渡屬性：

transition-property：規(guī)定設(shè)置過渡效果的 CSS 屬性的名稱。

transition-duration：規(guī)定完成過渡效果需要多少秒或毫秒。

transition-timing-function：規(guī)定速度效果的速度曲線。

transition-delay：定義過渡效果何時(shí)開始。

CSS網(wǎng)頁過渡效果

以下代碼示例為，把鼠標(biāo)指針移動到藍(lán)色的 div 元素上，就可以看到過渡效果（其寬度會從 100px 逐漸變?yōu)?300px）

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

使用css3的transition屬性，可以使用簡短的代碼，制作很多適合學(xué)生水平的網(wǎng)頁過渡效果，比如鼠標(biāo)經(jīng)過圖片放大縮小、鼠標(biāo)經(jīng)過按鈕放大縮小、鼠標(biāo)經(jīng)過按鈕邊框變化等等...

上一篇：大學(xué)生網(wǎng)頁作業(yè)要求中說的靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)站是什么意...

下一篇：大學(xué)生H5網(wǎng)頁設(shè)計(jì)作業(yè)頁面結(jié)構(gòu)常用的HTML5新元...

大學(xué)生網(wǎng)頁設(shè)計(jì)使用css3的transition簡單制作網(wǎng)頁過渡效果

作品推薦

相關(guān)文章