css怎樣設置元素過渡效果呢
css3的過渡效果用得好的話可以用來制作動畫特效，下面咪咪我就來給大家分享一下css3怎樣設置元素的過渡效果 。
工具/材料
電腦
hbuilder
操作方法
-
01
首先，先設置一個div，待會我們使用css3給這個div設置過渡效果。
-
02
然后給div設置寬高和背景，這里我就設置成200像素，深粉色。
-
03
接著開始設置transition屬性，通過這個屬性就可以給元素添加過渡效果。
-
04
如圖所示 ，第一個參數表示的是要過渡的屬性值，第二個參數表示的是過渡時間，這里我就設置背景過渡。
-
05
接著再設置鼠標經過div元素時背景顏色為暗藍色。
-
06
之后，預覽div背景過渡效果，當鼠標放在div元素上面就會由深粉色過渡到暗藍色，過渡時間是五秒鐘（這里因為是靜態圖片，待會我會貼出源碼）。
-
07
如果要設置多個屬性過渡可以把它們用逗號隔開，比如要同時設置背景和寬度過渡，則可以這樣寫。
-
08
接著再給div:hover設置寬度為400像素。
-
09
這樣，當我們鼠標經過div元素時，背景會過渡，同時div元素的寬度也會由200像素過渡到400像素 。
-
10
為了更好參考，我就貼出源代碼，直接保存為HTML文件就可以查看效果了哦。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>搜狗指南 </title>
<style type="text/css">
div{a
width: 200px;
height: 200px;
background: deeppink;s
transition: background 5s,width 5s;
}
div:hover{
background: darkblue;
width: 400px;
}
</style>
</head>
<body>
<div></div>
</body>
</html> - End
- 發表于 2017-08-17 00:00
- 閱讀 ( 973 )
- 分類：電腦網絡
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章