在写网页里一些简单的动画可以使用css完成,一个常用的功能就是transition,JiaJieChan今天就对博客的几个地方加入了这个效果。它可以将不同宽度、颜色、字体、形状的元素与另一元素之间的:hover变化过程加入动画过渡效果。具体也可以看看本博边栏我的头像的区域,鼠标悬停在拉出按钮上可以看到有一段过渡的动画效果,是不是很好看,下面就看看transition的一些使用方法以及格式。

W3C标准中对css3transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”

使用格式

使用方法很简单,transition: 元素 持续时间s; 这个就是格式,也可以看看下面的例子。

div {
background:#fff
transition: background 2s;
-moz-transition: background 2s;   /* Firefox 4 */
-webkit-transition: background 2s;  /* Safari 和 Chrome */
-o-transition: background 2s;  /* Opera */
}
div:hover {
background:#ccc;
}

如上就能够使background的改变加入动画过渡效果了。只要在:hover上加入改动后的属性就可以看到效果了。比如说前后的width宽度度发生变化而其他不变,则宽度会有一个变化过渡。

demo (鼠标放上来看看)

为了更好看,我加入了背景颜色。这不影响效果。

浏览器支持情况

Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。

Safari 需要前缀 -webkit-。

  • 注释:Internet Explorer 9 以及更早的版本,不支持 transition 属性。
  • 注释:Chrome 25 以及更早的版本,需要前缀 -webkit-。

更多更加详细的css教程可以到这里看看,自学css;

http://www.w3school.com.cn/css3/css3_transition.asp

Last modification:June 25, 2021
如果解决了你的困扰, 赏杯咖啡吧!
正文字体: 苍耳字库(屏幕显示字体)·苍耳今楷