大家在做网站的过程中都想把页面做的漂漂亮亮的,但是考虑到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>