HTML+CSS项目实践三:鼠标悬浮在图片上时,图片有一个简单动画效果(放大、旋转等)

知识点:CSS3 transform 属性、transition属性

实现效果:HTML+CSS项目实践三:鼠标悬浮在图片上时,图片有一个简单动画效果(放大、旋转等)_第1张图片

效果说明:一排图片大小一致,当鼠标放在任一图片上时,图片放大并且旋转。

制作思路:

1、给图片添加标签,利用伪类选择器实现

2、设置鼠标悬浮在a标签上时,添加动画属性。

3、主要用到属性:transform 属性(给图片进行变形),transition属性(过渡设置)

 

实现代码:





鼠标悬浮在图片上,图片有放大旋转等动画效果