开发工具与关键技术:Dw、css
作者:何德润
撰写时间:2019.1.26
下面,我用css3实现图片内文字的动画效果,代码图如下:
效果图:
当我用鼠标移入图片时,文字就会慢慢地缩小和消失,移开鼠标时,文字就会恢复原样。
我们如果想给文字加入其它的动画效果,可以给transform加其它的值,比如rotate(旋转),skew(扭曲),translate(位移)等。
我们使用了opacity属性来使文字消失,此属性主要是设置元素的不透明级别。值0是完全透明,1.0完全不透明。同时,也使用了transition属性的duration值,作用是规定完成过渡效果需要的时间(秒或毫秒)。