课程名称:过度的基本使用
课程章节:CSS3动画与穷游首页开发实战
课程讲师: 未知
课程内容:
一 transition过渡
transition过渡属性是CSS3浓墨重彩的特性,过渡可以为一个元素在不同样式之间变化自动添加“补间动画”
二 兼容性
过渡从IE10开始兼容,移动端兼容良好
曾几何时,网页上的动画特效基本都是由JavaScript定时器实现的,现在逐步改为使用CSS3过渡
优点:动画更细腻,内存开销小
三 transition属性基本使用
transition属性有4个要素,注意s不能省略
3.
.box1 { width: 200px; height: 200px; background-color: orange; transition: width 5s linear 0s; } .box1:hover {width: 800px} <div class="box1"></div>
四 哪些属性可以参与过渡
所有数值类型的属性,都可以参与过渡,比如width、height、left、top、border-radius
背景颜色和文字颜色都可以被过渡
所有变形(包括2D和3D)都能被过渡
五 all
如果要所有属性都参与过渡,可以写all
transition: all 1s linear 0s;
六 过渡的四个小属性
transition-property // 哪些属性要过渡 transition-duration // 动画时间 transition-timing-function // 动画变化曲线(缓动效果) transition-delay // 延迟时间
第二次刷了,纯属复习了
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí),寫(xiě)下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開(kāi)微信掃一掃,即可進(jìn)行掃碼打賞哦