开发工具与关键技术:Dw、css

作者:何德润

撰写时间:2019.1.26

下面,我用css3实现图片内文字的动画效果,代码图如下:

Css3实现文字动画

Css3实现文字动画

 

效果图:

Css3实现文字动画

 

当我用鼠标移入图片时,文字就会慢慢地缩小和消失,移开鼠标时,文字就会恢复原样。

我们如果想给文字加入其它的动画效果,可以给transform加其它的值,比如rotate(旋转),skew(扭曲),translate(位移)等。

我们使用了opacity属性来使文字消失,此属性主要是设置元素的不透明级别。值0是完全透明,1.0完全不透明。同时,也使用了transition属性的duration值,作用是规定完成过渡效果需要的时间(秒或毫秒)。

相关文章: