CSS

CSS3中的变形与动画(上)——过渡函数 transition-timing-function

字号+ 编辑: Snake 修订: Snake 来源: 慕课网 2021-04-20 14:39 我要说两句(0)

transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度,以及过渡期间的操作进展情况……

过渡函数 transition-timing-function

transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度,以及过渡期间的操作进展情况,其中要包括以下几种函数:

 图片8.png

案例展示:在hover状态下,让容器从一个正方形慢慢过渡到一个圆形,而整个过渡是先加速再减速,也就是运用ease-in-out函数。

HTML代码:

<div></div>

CSS代码:

div {
  width: 200px;
  height: 200px;
  background: red;
  margin: 20px auto;
  -webkit-transition-property: -webkit-border-radius;
  transition-property: border-radius;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}
div:hover {
  border-radius: 100%;
}

演示结果:

鼠标移入:            鼠标移出:

图片6.png图片7.png

阅完此文,您的感想如何?
  • 鼓掌

    0

  • 鄙视

    0

  • 开心

    0

  • 愤怒

    0

  • 可怜

    0

1.如文章侵犯了您的版权,请发邮件通知本站,该文章将在24小时内删除;
2.本站标注原创的文章,转发时烦请注明来源;
3.本站QQ群: 2702237

相关课文
  • CSS的边框逐渐发亮效果怎么做的

  • CSS的几个核心概念

  • 引入字体文件时报错: OTS parsing error: invalid version tag

  • 定义背景颜色半透明的效果

我要说说
网上宾友点评
CSS3中的变形与动画(上)——过渡函数 transition-timing-function