php鼠标悬停显示图片,HTML CSS 实现鼠标悬停时图片拉近效果

前言

为了让网页的使用体验更好，我们会让网页的某些元素对鼠标的动作做出响应。例如鼠标滑过、单击按钮的时候按钮变色、变形。之前在很多网页上看到了鼠标滑过一个图片链接时图片放大、拉近的效果，今天尝试实现一下。

1. 使用background实现

思路：设置以图片作为div元素的背景，鼠标滑过div的时候通过background属性放大图片。

background实现图片拉近效果

#box {

background: url(../images/img022.png);

width: 720px;

height: 720px;

margin: 0 auto;

border: 1px solid #aaa;

background-color: #444;

}

#box:hover {

background-size: 100.5% 100.5%;

}

2. 使用img元素的width height属性实现

思路：当鼠标滑过图片时，修改img元素的width和height属性放大图片

img图片拉近效果

#box{

width:60%;

min-width:1000px;

min-height:800px;

margin:0 auto;

border:1px solid #aaa;

background-color:#444;

text-align:center;

}

img:hover{

width:723px;

height:723px;

}

3. 使用transform放大图片

transform实现图片拉近效果

a:hover img {

transform: scale(1.005, 1.005);

}

4. 使用transform和transition来放大图片

以上的3种实现方式中，图片放大过程几乎都是瞬间完成的，感觉不流畅，视觉体验也不好。同transition可以设置放大过程经历的时间，从而有流畅的感觉。

transform、transform实现图片拉近

.test_a {

display: block;

margin: 0 auto;

width:400px;

overflow: hidden;

}

.test_a img {

width: 100%;

}

.test_a:hover img {

transform: scale(1.2);

transition: all 1s ease 0s;

}

上面这种方式，图片放大过程是流畅的，但是缩小过程很生硬，可以改进一下。

transform、transform 图片拉近优化

.test_a {

display: block;

margin: 0 auto;

width:400px;

overflow: hidden;

}

.test_a img {

width: 100%;

transform: scale(1);

transition: all 1s ease 0s;

}

.test_a:hover img {

transform: scale(1.2);

transition: all 1s ease 0s;

}

后语

实验的时候发现很多知识有点模糊了，该补习了。

php鼠标悬停显示图片,HTML CSS 实现鼠标悬停时图片拉近效果相关推荐

html中鼠标悬浮显示与隐藏,css鼠标悬浮控制元素隐藏与显示
在网页开发中经常有需求是鼠标移动到一个元素A身上时,另外一个元素B显示. 如下图当鼠标移到图片上时,相关的描述从下方显示出来. css实现原理与情景: A 是 B 的父元素 B 默认隐藏 B{opa ...
css改变鼠标图片大小,CSS实现鼠标经过图片上图片等比缩放效果（代码实例）
本篇文章给大家带来的内容是关于如何使用CSS实现鼠标经过图片上图片缩放(缓慢变化,有过渡效果,缩放的过程是有动画过渡的)效果,主要用到CSS transform属性,css3 transition属性 ...
html5 悬停边框,Html，css：在悬停时更改行的边框颜色(Html,css: Change a row's border colow on hover)...
Html,css:在悬停时更改行的边框颜色(Html,css: Change a row's border colow on hover) 我正在使用DataTables,我试图在行悬停时将行的顶部和 ...
html导航图片滚动条,CSS实现导航栏底部动态滚动条效果
预习了CSS3部分的新知识,想着在不使用JS的情况下实现导航栏滚动条效果,如下: 实现滚动条效果,其实就是在标签中让元素的宽度由0变化到100%,代码很简单,如下所示: CSS样式部分: ul.na ...
本地html图片载入很慢,打开网页时图片加载很慢怎么办？网页图片打开慢的解决方法...
打开网页里的图片很慢怎么办,电脑打开带图片的网页速度很慢的原因有网速的原因也有电脑配置和软件设置的因素. 电脑打开带图片的网页速度很慢是什么原因清理影响网页打开速度的因素 cookies,开始-控制 ...
html鼠标悬停显示窗口,javascript-页面中鼠标移动或停留均显示提示框
鼠标移动到隐藏内容时显示提示框,鼠标停留在提示框时依旧显示.鼠标离开提示框和隐藏内容时提示框消失. 使用时配合table框是固定宽度,将超过宽度的多余信息予以用省略号显示. 将table框CSS设置为 ...
HTML鼠标悬停显示隐藏div,JQ实现鼠标悬停显示或隐藏DIV层
$(document).ready(function(){ $("#div1").hide(); //先将层隐藏起来 var canHide = false; //标记是否可隐 ...
HTML鼠标悬停显示隐藏div,javascript – 在鼠标悬停时显示/隐藏DIV
[reedit基于评论] jsfiddle修订,删除了css-only解决方案.诀窍是监视滑动元素的悬停状态并使用超时允许用户在滑动元素上移动(另请参阅更新的jsfiddle中的注释). 来自OPs ...
html鼠标悬停弹出,纯css实现鼠标滑过弹出层效果
复制代码代码如下: 无标题文档 *{margin:0; padding:0;} /* 所有元素外边距为0 内边距为0 */ /* body中元素字体大小为12px,字体样式为:"Times ...

php鼠标悬停显示图片,HTML CSS 实现鼠标悬停时图片拉近效果

php鼠标悬停显示图片,HTML CSS 实现鼠标悬停时图片拉近效果相关推荐

最新文章

热门文章