簡介
transitionde的功能：就是實現(xiàn)css的屬性值在一定的時間區(qū)間內(nèi)平滑的過渡们衙。
除了javascript處罰外析砸，還有一些偽類來觸發(fā)：:hover; :focus; :active; :target; :checked。
創(chuàng)建過渡的步驟
- 在默認樣式中聲明元素的初始狀態(tài)的樣式戚长；
- 聲明過渡元素最終狀態(tài)樣式；
- 在默認樣式中通過添加過渡函數(shù)起暮，添加一些不同的樣式铺罢。
.transition{
/*第一步：常規(guī)樣式*/
background: #8ec63f;
width:100px;
height: 100px;
border-radius: .5em;
/*第三步：添加過渡函數(shù)*/
-webkit-transition: background 2s linear 2s, border-radius 3s ease-in-out;
-o-transition: background 2s linear 2s, border-radius 3s ease-in-out;
transition: background 2s linear 2s, border-radius 3s ease-in-out;
}
/*第二步：聲明最終樣式*/
.transition:hover{
background: #f7941d;
border-radius: 50%;
}
兼容性
| chrome | IE | opera | safari | firefox |
|---|---|---|---|---|
| 4.0+ | 10+ | 10.5+ | 3.1+ | 4.0+ |
當(dāng)然雖然支持很好艇挨，但是在使用的時候還是要加上瀏覽器的前綴残炮。
過渡屬性詳解
復(fù)合屬性：
transition:transition-property transition-duration transition-timing-function transition-delay ;
- transition-property:指定過渡的css屬性
- transition-duration:過渡所需的時間
- transition-timing-function:過渡函數(shù)
- transition-delay:過渡開始出現(xiàn)的延遲時間
transition-property
1.取值：all/none/single-transition-property
2.關(guān)于single-transition-property韭赘；并不是所有的屬性值均可以用這個的。具有中值屬性的屬性才可以势就。
3.整理
| 屬性 | 值eg |
|---|---|
| 顏色屬性 | background/color... |
| 長度值或者百分比 | word-spacing/width/vertical-align/top../min-width/max-height/line-height/backgroung-position |
| integer | z-index |
| number | zoom/opacity/font-weight |
| 變形 | rotate()/scale()/skew()/translate() |
| visibility | 0~1 |
| 陰影 | text-shadow |
| 漸變：每次停止時的位置和顏色進行變化 | 必須有相同的類型和相同的停止數(shù)值 |
| ... | ... |
transition-duration
transition-timing-function
各個函數(shù)詳解
1.單一的過渡函數(shù)
ease：默認值泉瞻。由快變慢。
linear：勻速苞冯。
ease-in：速度越來越快袖牙，加速。
ease-out：越來越慢舅锄，減速鞭达。
ease-in-out：先加速再減速，漸顯漸隱效果皇忿。
2.三次貝塞爾函數(shù)
使用方法：
transition-timing-function: cubic-bezier(P0, P1, P2, P3)
自定義過渡函數(shù)
如圖：可以明白自定義函數(shù)的原理畴蹭。
顯然，可以用cubic-bezier自定義出單一的過渡函數(shù)鳍烁。
3.step()
step(integer,start/end)
一張圖來說明：
transition-delay
這個屬性和transition-duration一樣簡單叨襟，繼續(xù)略。
觸發(fā)過渡
1.偽元素觸發(fā)
- :active點擊鼠標并且需要按住幔荒。
- :focus
- :checked
- :hover
input[type="radio"] ~ span{
width:100px;
/*display:block;*/
border:1px solid red;
transition:width 2s ease-in 1s;
}
input[type="radio"]:checked ~ span{
width:200px;
}
2.媒體查詢觸發(fā)
這種方法可以在實現(xiàn)不同的屏幕大小的時候可以平滑過渡糊闽。
3.javascript觸發(fā)
css Dock示例總結(jié)
- webkit獨有的鏡像屬性box-reflec
使用方法：
-webkit-box-reflect：none | <direction> <offset>? <mask-box-image>
box-reflect：none | <direction> <offset>? <mask-box-image>
取值說明：
- none:此值為box-reflect默認值，表示無倒影效果爹梁；
- <direction>:此值表示box-reflect生成倒影的方向右犹，主要包括以下幾個值：
- above:表示生成的倒影在對象（原圖）的上方；
- below:表示生成的倒影在對象（原圖）的下方姚垃；
- left:表示生成的倒影在對象(原圖)的左側(cè)傀履；
- right:表示生成的倒影在對象(原圖)的右側(cè)；
- offset:用來設(shè)置生成倒影與對象（原圖）之間的間距莉炉，其取值可以是固定的像素值钓账，也可以是百分比值，如：
- 使用長度值來設(shè)置生成的倒影與原圖之間的間距絮宁，只要是CSS中的長度單位都可以梆暮，此值可以使用負值；
- 使用百分比來設(shè)置生成的倒影與原圖之間的間距绍昂，此值也可以使用負值啦粹。
- mask-box-image:用來設(shè)置倒影的遮罩效果偿荷，可以是背景圖片，也可以是漸變生成的背景圖像唠椭。
-webkit-box-reflect: below -16px -webkit-gradient(
linear, left top, left bottom,
from(transparent),
color-stop(91%, rgba(255, 255, 255, .1)),
color-stop(91.01%, transparent),
to(transparent)
);
- 模仿tooltips效果
.dock em {
position: absolute;
top: -34px;
left: 50%;
display: none;
width: 150px;
margin-left: -75px;
text-align: center;
}
.dock em:after {
content: " ";
position: absolute;
top: 100%;
left: 50%;
margin-left: -6px;
width: 0;
height: 0;
/*下三角實現(xiàn)方法*/
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid rgba(0, 0, 0, .6);
border-bottom: none;
}
.dock em span {
display: inline-block;
padding: 5px 12px;
font-size: 14px;
font-style: normal;
color: #FFF;
background: #000;
background: rgba(0, 0, 0, .6);
text-shadow: 1px 1px 1px rgba(0, 0, 0, .9);
border-radius: 12px;
}
.dock li:hover em,
.dock li a:focus em {
display: block;
}
說明
- 這個是看大漠編寫的《圖解css3》的筆記系列跳纳。源碼均來自書上。
- 原文是在我的博客同步贪嫂。
