先來談談hover
hover就是「滑鼠移上去時會產生的效果」。
以側邊欄區塊為例，我希望它原本呈現半透明，滑鼠移上去後再恢復不透明狀態。(透明語法請參照：CSS教學 | 透明度應用)
原先語法如下：
|
#links {
opacity:.5;
-moz-opacity:.5;
filter:alpha(opacity=50);
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
width:265px;
float:right;
display:inline;
overflow:hidden;
background-color:#fff;
color:#9db3bc;
margin:-50px 0 0 13px;
}
|
複製一串相同語法，在#links後加上「:hover」
|
#links {
opacity:.5;
-moz-opacity:.5;
filter:alpha(opacity=50);
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
width:265px;
float:right;
display:inline;
overflow:hidden;
background-color:#fff;
color:#9db3bc;
margin:-50px 0 0 13px;
}
#links:hover {
opacity:1;
-moz-opacity:1;
filter:alpha(opacity=100);
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
width:265px;
float:right;
display:inline;
overflow:hidden;
background-color:#fff;
color:#9db3bc;
margin:-50px 0 0 13px;
}
|
: 透明度變化
這樣就會有變化囉~
但你或許覺得立即的變化不好看，因此我們再來談談漸變語法吧！
漸 變 語 法
|
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
|
: 0~1(變化速度，數值越大越快)
同樣以側邊欄語法為例，在「#links」和「#links:hover」皆加入漸變語法，它就會慢慢地變不透明再慢慢地恢復透明囉~
|
#links {
opacity:.5;
-moz-opacity:.5;
filter:alpha(opacity=50);
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
width:265px;
float:right;
display:inline;
overflow:hidden;
background-color:#fff;
color:#9db3bc;
margin:-50px 0 0 13px;
}
#links:hover {
opacity:1;
-moz-opacity:1;
filter:alpha(opacity=100);
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
width:265px;
float:right;
display:inline;
overflow:hidden;
background-color:#fff;
color:#9db3bc;
margin:-50px 0 0 13px;
}
|
|
以上兩種語法可以應用在許多地方，希望此篇教學有幫助到大家~
ex:字色與字效變化。
↓↓↓
留言列表
/Life (3)