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

用CSS实现非常简单只需要在style样式里添加transition过度样式即可 在hover状态里使用transform变换样式即可 transform：scale//比例<styletype="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*/}