文章来源于网络收集而来,版权归原创者所有,如有侵权请及时联系!
第九课 CSS3 运动体系
过渡
- 过渡:给改变添加过程
- 什么是过渡
- 过渡效果由哪几部分组成
- 过渡可以干些什么
transition
过渡属性transition: property duration timing-function delay
;transition-property:
过渡属性的名称none
没有过渡属性all
所有属性都过渡(默认值)property
具体属性名称(property1
,property2
…)
transition-duration:
过渡属性花费的时间time
秒或毫秒
transition-timing-function:
过渡效果速度曲线time
秒或毫秒
transition-delay:
过渡效果延迟时间
transition-timing-function
:过渡效果速度曲线linear
:规定以相同速度开始至结束的过渡效果(等于cubic-bezier(0,0,1,1)
)。ease
:规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1)
)。ease-in
:规定以慢速开始的过渡效果(等于cubic-bezier(0.42,0,1,1)
)。ease-out
:规定以慢速结束的过渡效果(等于cubic-bezier(0,0,0.58,1)
)。ease-in-out
:规定以慢速开始和结束的过渡效果(等于cubic-bezier(0.42,0,0.58,1)
)。cubic-bezier(n,n,n,n)
:在cubic-bezier
函数中定义自己的值。可能的值是0
至1
之间的数值。
- 过渡完成事件
Webkit
内核:obj.addEventListener('webkitTransitionEnd',function(){})
- 标准:
obj.addEventListener('transitionend',function(){})
动画
- 什么是
CSS3
动画?- 通过
CSS3
,我们能够创建动画,这可以在许多网页中取代动画图片、Flash
动画以及JavaScript
- 通过
- 动画接口
属性 | 描述 |
---|---|
@keyframes | 规定动画。 |
animation | 所有动画属性的简写属性,除了 animation-play-state 属性。 |
animation-name | 规定 @keyframes 动画的名称。 |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒。 |
animation-timing-function | 规定动画的速度曲线。 |
animation-delay | 规定动画何时开始。 |
animation-iteration-count | 规定动画被播放的次数。 |
animation-direction | 规定动画是否在下一周期逆向地播放。 |
animation-play-state | 规定动画是否正在运行或暂停。 |
animation-fill-mode | 规定对象动画时间之外的状态。 |
- animation-timing-function 速度曲线
值 | 描述 |
---|---|
linear | 动画从头到尾的速度是相同的。 |
ease | 默认。动画以低速开始,然后加快,在结束前变慢。 |
ease-in | 动画以低速开始。 |
ease-out | 动画以低速结束。 |
ease-in-out | 动画以低速开始和结束。 |
cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
- 在谷歌浏览器里面需要加上
-webkit-
IE6,7,8,9
不支持css3
运动 - 拓展阅读
- CSS3 盒模型阴影
box-shadow:inset x y blur spread color
inset
:投影方式inset
:内投影outset
:外投影 默认(不能设置)x
、y
:阴影偏移blur
:模糊半径(灰度)spread
:扩展阴影半径- 先扩展原有形状,再开始画阴影
color
CSS3
盒模型倒影box-reflect
倒影- 方向
above|below|left|right;
- 距离
- 渐变(可选)
- 方向
- CSS3 其他盒模型
box-sizing
盒模型解析模式content-box
标准盒模型(和css2
一样的计算)width/height=border+padding+content
border-box
怪异盒模型width/height
与设置的值一样 ,content
减小
- 扩展阅读
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论