IT培訓(xùn)網(wǎng)
IT在線學(xué)習(xí)
一、CSS3 過渡
transition
css3的transition允許css的屬性值在一定的時間區(qū)間內(nèi)平滑地過渡。這種效果可以在鼠標(biāo)單擊、獲得焦點、被點擊或?qū)υ厝魏胃淖冎杏|發(fā),并圓滑地以動畫效果改變CSS的屬性值
transition-property:檢索或設(shè)置對象中的參與過渡的屬性
transition-duration:檢索或設(shè)置對象過渡的持續(xù)時間
transition-delay:檢索或設(shè)置對象延遲過渡的時間
transition-timing-function:檢索或設(shè)置對象中過渡的動畫類型
貝塞爾曲線:
屬性值:cubic-bezier()
貝塞爾曲線網(wǎng)址:http://cubic-bezier.com/
簡寫:transition:all/具體屬性值 運動時間s/ms 延遲時間s/ms 動畫類型
最簡寫:transition:運動時間s/ms
案例:懸停div,讓p標(biāo)簽沿著x方向發(fā)生位移
二、CSS3 幀動畫
animation
幀動畫是通過一幀一幀的畫面按照固定順序和速度播放,如電影膠片?赏ㄟ^設(shè)置多個節(jié)點來精確控制一個或一組動畫,常用來實現(xiàn)復(fù)雜的動畫效果。
語法:
第一步:先用@keyframes 制定運動動畫的軌跡規(guī)則
@keyframes myMove{
from{初始狀態(tài)屬性}
to{結(jié)束狀態(tài)屬性}
}
或
@keyframes myMove{
0%{初始狀態(tài)屬性}
100%{結(jié)束狀態(tài)屬性}
}(中間再可以添加關(guān)鍵幀)
備注:mymove是給動畫起的名字
>>本文地址:http://www.yceu.cn/zhuanye/2019/48238.html
聲明:本站稿件版權(quán)均屬中公教育優(yōu)就業(yè)所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
1 您的年齡
2 您的學(xué)歷
3 您更想做哪個方向的工作?