返回介绍

第九课 CSS3 运动体系

发布于 2024-09-07 17:46:30 字数 4433 浏览 0 评论 0 收藏 0

过渡

  • 过渡:给改变添加过程
    • 什么是过渡
    • 过渡效果由哪几部分组成
    • 过渡可以干些什么
  • 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 函数中定义自己的值。可能的值是 01 之间的数值。
  • 过渡完成事件 过渡完成事件
  • 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 :外投影 默认(不能设置)
    • xy :阴影偏移
    • 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文