互补网网专做高品质CMS教程,所有教程均为站长亲测有效后发布。
您当前所在位置:互补网首页 > 站长学院 > DIV+CSS教程 >

纯css实现鼠标移动图片图片逐渐放大(过渡效果)

发布时间:2019-05-12热度:0

  大家在做网站的过程中都想把页面做的漂漂亮亮的,但是考虑到seo问题,不想沉淀太多js代码影响加载速度。

  实现鼠标移动图片,图片渐渐放大,这里凡艺网络来跟大家分享下,如何使用css实现。

  具体代码如下:

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>纯css实现鼠标移动图片图片逐渐放大(过渡效果)</title>  
    <style type="text/css">  
            div{
	width: 300px;
	height: 300px;
	border: #000 solid 1px;
	overflow: hidden;
	float: left;
            }  
            div img{  
                cursor: pointer;  
                transition: all 0.6s;  
            }  
            div img:hover{  
                transform: scale(1.4);  
            }  
        </style>  
</head>  
    <body>  
        <div><img src="/uploads/allimg/1708/1-1FP12005570-L.jpg" width="300px;"height="300px;"/>  </div>  
        <div><img src="/uploads/allimg/170707/1-1FFG644050-L.jpg" width="300px;"height="300px;"/>  </div>
        <div><img src="/uploads/allimg/170715/1-1FG50026200-L.jpg" width="300px;"height="300px;"/>  </div>
    </body>  
</html> 
本文地址:http://www.25923.com/xuexi/divcss/051234.html(转载请保留)