html文字图片过度效果,如何在图片上应用css3过渡属性？

css3过渡属性结合伪类选择器可以实现一些简单的动画效果，下面我们就来看看在图片上使用过渡属性的方法吧。

如何在图片上应用css3过渡属性？

transition 属性是一个简写属性，用于设置四个过渡属性：transition-property:定义应用过渡效果的CSS属性;

transition-duration:定义过渡效果执行的时间;

transition--delay:定义过渡操作之前的等待时间;

transition-timing-function:指定过渡过程的中间值如何规定;

在img是使用过渡属性的方法：

(推荐学习：CSS视频教程)

(1)添加一个img标签，并指定一张图片

(2)给img添加transition过渡属性，值为all .5s ease-outimg{

width: 100px;

transition: all .5s ease-out;

}

(3)给img添加伪类选择器，当鼠标悬浮时，将图片放大1.1倍img:hover{

transform: scale(1.1);

}

(4)效果：

术语解释:

linear:匀速过渡

ease-in:加速

ease-out:减速

ease-in-out:先加速后减速

ease:曲线与ease-in-out差不多,但画面加速比ease-in-out快

更多CSS3相关技术文章，请访问CSS3答疑栏目进行学习！