从0开始html前端页面开发_CSS实现图像获取鼠标焦点逐渐变大动画效果

用CSS实现非常简单只需要在style样式里添加transition过度样式即可在hover状态里使用transform变换样式即可transform：scale//比例
 <style <
4000
/span>type="text/css">  
      
            img{  
                cursor: pointer;      <!--设置鼠标形状-->
                transition: all 1.1s;  <!--所有变换过度，过度时间：1.1秒-->
            }  
            img:hover{  
                transform: scale(1.4);     <!--变换比例为1/4-->  
            }  
        </style>  
当鼠标经过img时图像会逐渐变大并在1.1s秒内完成。
css文件： img{
cursor: pointer; /*设置鼠标形状*/
transition: all 1.1s; /*所有变换过度，过度时间：1.1秒*/
}
img:hover{
transform: scale(1.4); /*变换比例为1/4*/
}