【第21期】观点:人工智能到底用 GPU?还是用 FPGA?

CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)

原创 2016年05月30日 10:05:59

CSS3的transform:scale()可以实现按比例放大或者缩小功能。

CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。

效果如下图所示:

1、当未鼠标未放到图片上的效果:


2、当鼠标放到图片上后(放大的过程是有动画过渡的,这个过渡的时间可以自定义):


代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 300px;
				height: 300px;
				border: #000 solid 1px;
				margin: 50px auto;
				overflow: hidden;
			}
			div img{
				cursor: pointer;
				transition: all 0.6s;
			}
			div img:hover{
				transform: scale(1.4);
			}
		</style>
	</head>
	<body>
		<div>
			<img src="img/focus.png" />
		</div>
	</body>
</html>

其中:

transition: all 0.6s;表示所有的属性变化在0.6s的时间段内完成。

transform: scale(1.4);表示在鼠标放到图片上的时候图片按比例放大1.4倍。


代码下载地址:http://download.csdn.net/detail/u014175572/9535023

版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

css实现鼠标悬停图片放大显示

* { margin: 0; padding: 0; font-family: "微软雅黑"; } .avatar { display: block; ...

用CSS实现鼠标悬停图片放大的效果

使用CSS制作鼠标悬停放大

CSS3 - 鼠标经过图片缓慢放大、鼠标离开缓慢还原

在线演示鼠标经过或悬停时,图片会缓慢放大;鼠标离开,图片缓慢还原。 下图分别为:原图、鼠标经过代码: div...

图片在鼠标滑过的时候就放大,鼠标移开就恢复

外层容器设置宽高,超过的部分就隐藏。 a{        width: 250px;     height: 160px;     overflow: hidden;     bord...

【抛砖引玉】鼠标悬停,图片由中心放大的过渡效果解决及问题

响应式布局中,实现鼠标悬停,图片由中心放大且不撑开容器的简单css过渡效果。

css3鼠标经过,图片放大效果

css代码/*图片划过改变图片大小效果*/ .list ul li { width: 228px; height: 270px; overflow: hidden; z-index: 1; posit...

鼠标悬停图片放大提示效果

qq_15253407
  • qq_15253407
  • 2016-07-11 16:02
  • 987
  • 响应式图片列表鼠标经过放大效果样式代码

    主要使用CSS3的box-sizing:border-box;属性来设置按照百分比布局的样式。结合媒体查询判断页面宽度设置区块的响应式展示。并添加了一些hover属性的动画过度效果。熟悉transfo...

    鼠标经过,图片会放大(从中心位置放大)

    js部分:  //鼠标经过a标签,对应的图片会放大效果         var zoom = 1.03;         var width = $(this).find(".move_...

    CSS3实现三角小图标

    CSS3的transform可以实现页面元素的扭转、变形等功能。 实现如下图所示的三角形小图标只需要transform定义的一行代码即可,无需再使用图片。
    收藏助手
    不良信息举报
    您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
    举报原因:
    原因补充:

    (最多只允许输入30个字)