您现在的位置:首页 >> 前端 >> 内容

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

时间:2018/3/6 15:58:06 点击:

  核心提示:用CSS实现非常简单只需要在style样式里添加transition过度样式即可在hover状态里使用transform变换样式即可transform:scale//比例img{cursor: poi...

CSS实现非常简单只需要在style样式里添加transition过度样式即可

在hover状态里使用transform变换样式即可

transform:scale//比例

            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*/  

           }    

Tags:HT TM ML L前 
作者:网络 来源:17岁boy的博客