初学HTML——过渡与变形综合应用

一.基本要求

1.当鼠标移上第一张图像时,产生直角边框过渡为圆角边框

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

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

4.当鼠标移上第四张图像时,产生图片透明度逐渐变暗

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

二.代码部分




    
    


	
"one">
"word1">SHAPE
"photo1">"1.png" >
"word2">DISPLACEMENT
"photo2">"2.png" id="two">
"word3">PSOITION
"photo3">"3.png" >
"word4">COLOR
"photo4">"4.png" >

三.显示效果

1.未点击时:

初学HTML——过渡与变形综合应用_第1张图片

2.鼠标停留在第一张图片时

初学HTML——过渡与变形综合应用_第2张图片

3.鼠标停留在第二张图片时

初学HTML——过渡与变形综合应用_第3张图片

4.鼠标停留在第三张图片时

初学HTML——过渡与变形综合应用_第4张图片

5.鼠标停留在第四张图片时

初学HTML——过渡与变形综合应用_第5张图片

你可能感兴趣的:(HTML5)