CSS3过渡和变形综合应用——不同图片效果

CSS3过渡和变形的综合应用

在前面的文章我们了解了CSS3的过渡属性和变形属性,今天利用这两个属性的来实现不同的图片效

果,一起来看看吧!

要求

(1)当鼠标移上第一-张图像时,产生直角边框过渡为圆角边框的效果。

(2) 当鼠标移上第二张图像时,产生图片逐渐放大的过渡效果。

(3) 当鼠标移上第三张图像时,产生图片旋转的过渡效果。

(4)当鼠标移上第四张图像时,产生图片透明度逐渐变暗的过渡效果。

(5)当鼠标移上四张图像的任一图像时,都伴随着盒子阴影的过渡效果。




    
    CSS过渡与变形
    


SHAPE
DISPLACEMENT
POSITION
COLOR

过渡前的效果图
CSS3过渡和变形综合应用——不同图片效果_第1张图片
当鼠标移上第一张图片时
CSS3过渡和变形综合应用——不同图片效果_第2张图片
当鼠标移上第二张图片时
CSS3过渡和变形综合应用——不同图片效果_第3张图片
当鼠标移上第三张图片时
CSS3过渡和变形综合应用——不同图片效果_第4张图片
当鼠标移上第四张图片时
CSS3过渡和变形综合应用——不同图片效果_第5张图片
动手操作一下吧!

你可能感兴趣的:(css3,html)