CCS过渡

  • 过渡能让使用过渡的元素在样式发生变化时(例如鼠标划过,单击按钮,点击图片时,颜色,尺寸,位置等样式发生变化),定义变化过程中的动画,让变化不再是瞬间产生。

  • 过渡样式使用transition定义,一共有四个属性
  1. transition-property:过渡属性,比如color, opacity, width等所有可以在css中使用的属性
  2. transition-duration:过渡持续时间
  3. transition-timing-function:过渡速度,比如linear是匀速
  4. transition-delay:过渡延迟,0表示立即开始
.tl:hover {
  color: red;
  font-size: 18px;
}
.tl {
  transition-property: color font-size;//可以定义多个属性同时过渡,或者使用all代表所有变化的属性
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 0s;
}

也可以写到一起:

.tl:hover {
  color: red;
  font-size: 18px;
}
.tl {
  transition: font-size linear 2s 0s, color linear 4s 0s 
}

注意多个属性可以定义不同的过渡效果,用逗号隔开,时间一定要带单位,比如0s不能写成0

猜你喜欢

转载自www.cnblogs.com/cowboybusy/p/11517235.html
今日推荐