-webkit-transform:scale(1.04)放大缩小效果
<p>【鼠标移动进去图片放大一倍效果:运用了-webkit-transform:scale(1.04)效果】</p>
如图:鼠标移动上去的时候图片放大一倍的效果,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
html{color:#333;background:#f3f3f3;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select,strong{font-family:inherit;font-size:inherit;}
input,textarea,select{*font-size:100%;}
legend{color:#333;}
.clear{height:0;font-size:0;line-height:0;clear:both; display:block;}
body{font-size:12px;background-color:#f3f3f3;font-family:tahoma,verdana,arial,helvetica,sans-serif;text-align:center;color:#333; line-height:20px;}
a{color:#816353;text-decoration:none;}
a:hover{color:#c01313;}
.clearfix{zoom:1;}.clearfix:after{content:'\0020';display:block;height:0;clear:both;} .container{ width:980px; margin:15px auto; overflow:hidden; text-align:left;}
.modul{ width:1000px;}
.mod_title{ font-size:22px; font-family:"Microsoft YaHei"; height:24px; line-height:24px; font-weight:bold; color:#3d3d3d; display:block; margin-bottom:15px;}
.modul li{ float:left; width:313px; margin-right:20px;}
.mod_show{ display:block; width:100%; background:#fff; overflow:hidden; zoom:1; margin-bottom:20px;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.1);-moz-box-shadow:0 1px 0 rgba(0,0,0,.1);box-shadow:0 1px 0 rgba(0,0,0,.1); position:relative;}
.mod_img{ cursor:pointer; max-width:100%; overflow:hidden; position:relative; height:190px;}
.mod_img a img{ vertical-align:top;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out; max-width:100%;}
.mod_img a:hover img{-webkit-transform:scale(1.04);-moz-transform:scale(1.04);transform:scale(1.04);}
.mod_detail{ padding:10px; background:#fff; font-size:12px;}
.mod_detail:after{ content:''; display:block; clear:both;}
.mod_detail .mod_avatar{ margin-top:26px; background-color:#fff; border:1px solid #e3e3e5; padding:5px; float:right;}
.mod_detail .mod_avatar img{ width:50px; height:50px; vertical-align:top;}
.mod_detail .mod_tit{ font-size:16px; font-weight:400; height:18px; line-height:18px; color:#3d3d3d; padding-bottom:7px; overflow:hidden; font-family:"Microsoft YaHei";}
.mod_detail .mod_info{ color:#9f9f9f; margin-bottom:8px; line-height:16px; height:32px; overflow:hidden;}
.mod_detail .mod_dete .ui_light{ color:#9f9f9f;}
</style>
</head> <body>
<div class="container">
<h3 class="mod_title">旅游设计师</h3>
<ul class="modul clearfix">
<li>
<div class="mod_show">
<p class="mod_img"><a href="javascript:void(0);"><img src="http://102.img.lvren.com/static/uploads/image/home_page/2014/0728/20140728095334_54846.jpg"></a></p>
<div class="mod_detail">
<div class="mod_avatar"><img src="http://www.bagtree.com/themes/bagtree_2011/images/touxian.gif"></div>
<div class="mod_conten">
<h3 class="mod_tit">站在历史和地理的正确一方</h3>
<div class="mod_info">爱李白爱司马迁。闲时写瘦金体,弹琵琶曲,还能卜梅花易。背过八大菜系的40本菜谱,去过中国的每个省,为吃去旅行的金牛女。上班干QQ旅游,总也干不好,老被老板骂</div>
<div class="mod_dete">设计师:<span class="ui_light">梁宁</span></div>
</div>
</div>
</div>
</li>
<li>
<div class="mod_show">
<p class="mod_img"><a href="javascript:void(0);"><img src="http://102.img.lvren.com/static/uploads/image/home_page/2014/0728/20140728095334_54846.jpg"></a></p>
<div class="mod_detail">
<div class="mod_avatar"><img src="http://www.bagtree.com/themes/bagtree_2011/images/touxian.gif"></div>
<div class="mod_conten">
<h3 class="mod_tit">站在历史和地理的正确一方</h3>
<div class="mod_info">爱李白爱司马迁。闲时写瘦金体,弹琵琶曲,还能卜梅花易。背过八大菜系的40本菜谱,去过中国的每个省,为吃去旅行的金牛女。上班干QQ旅游,总也干不好,老被老板骂</div>
<div class="mod_dete">设计师:<span class="ui_light">梁宁</span></div>
</div>
</div>
</div>
</li>
<li>
<div class="mod_show">
<p class="mod_img"><a href="javascript:void(0);"><img src="http://102.img.lvren.com/static/uploads/image/home_page/2014/0728/20140728095334_54846.jpg"></a></p>
<div class="mod_detail">
<div class="mod_avatar"><img src="http://www.bagtree.com/themes/bagtree_2011/images/touxian.gif"></div>
<div class="mod_conten">
<h3 class="mod_tit">站在历史和地理的正确一方</h3>
<div class="mod_info">爱李白爱司马迁。闲时写瘦金体,弹琵琶曲,还能卜梅花易。背过八大菜系的40本菜谱,去过中国的每个省,为吃去旅行的金牛女。上班干QQ旅游,总也干不好,老被老板骂</div>
<div class="mod_dete">设计师:<span class="ui_light">梁宁</span></div>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
-webkit-transform:scale(1.04)放大缩小效果的更多相关文章
- 制作一个顶部图片可以拉伸放大缩小效果的tableViewHeader
最近负责公司项目个人中心的项目模块研发,首页是一个头部图片可以拉伸放大缩小效果的tableViewHeader,今天这个demo和教程我增加了模糊效果和头像缩小效果.具体效果如图: 如果这个效果是想要 ...
- css scale 元素放大缩小效果
<style> .trans-scale { width: 300px; height:300px; margin:100px auto; background:#99F; transit ...
- 自定义ImageView实现图片手势滑动,多点触摸放大缩小效果
首先呢,还是一贯作风,我们先来看看众多应用中的示例:(这种效果是很常见的,可以说应用的必须品.) 搜狐客户端 ...
- 纯CSS实现内容放大缩小效果
先搭架子 再实现第一个内容 填充更多内容 拆掉border,查看最终效果 html代码 <!-- 服务 --> <div class="service"> ...
- html 图片在一个div中放大缩小效果
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
- vue项目 一行js代码搞定点击图片放大缩小
一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...
- css----动画(图片无限放大缩小)
先给大家推荐animate.css库,里面有一些效果很不错的过度样式,不想自己写的也可以直接安装这个库来使用,如果不想安装这个库也可以去https://daneden.github.io/animat ...
- 用css3实现图片的放大缩小
记录一个公用的css实现图片的放大缩小 @keyframes scaleDraw { /*定义关键帧.scaleDrew是需要绑定到选择器的关键帧名称*/ 0%{ transform: scale(1 ...
- imageView图片放大缩小及旋转
imageView图片放大缩小及旋转 一.简介 二.方法 1)设置图片放大缩小效果 第一步:将<ImageView>标签中的android:scaleType设置为"fitCen ...
随机推荐
- SSH框架中新建立实体类后的配置
strut 层 public class Sellauthentication extends ActionSupport { private SellauthenticationService ...
- css 多行溢出
<div style=" height: 38px; max-width: 180px; -webkit-box-orient: vertical; word-break: break ...
- Oracle中有个tkprof来格式化oracle的trace文件
1.MySQL日志文件系统的组成2.慢查询日志3.慢查询日志演示long_query_time : 设定慢查询的阀值,超出次设定值的SQL即被记录到慢查询日志,缺省值为10sslow_query_lo ...
- 【iCore3 双核心板】例程十九:USBD_MSC实验——虚拟U盘
实验指导书及代码包下载: http://pan.baidu.com/s/1i4eNbQd iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...
- jquery选择伪元素属性的方法
CSS伪元素不是DOM元素,因此你无法直接选择到它们 一个方法是为该元素添加新类,并通过设置新类的属性来达到改变伪元素属性的效果: .checkboxWrapper.selected::before{ ...
- linux 中的斜杠 ‘/’ ‘\’ 的区别 - 服务器是LINUX的注意了, 和windows 的不一样哦!
ubuntu@ubuntu:~$ vi \> ubuntu@ubuntu:~$ 稍微思考了一下就明白了,不是打不开,问题出在这个文件名" \ "上面. 反斜线符号" ...
- 常用的不熟的sql语句
1.select * from dbo.Consum_AccountPaymentLog Where CHARINDEX(',1,',','+RelatedUserIDs+',')>0 char ...
- nodejs 80端口监听失败及NODE_PATH不起作用的问题
nodejs做web服务器,打开80时报错:Error: listen EACCES 0.0.0.0:80 80端口监听失败,是因为1024以下的端口需要root权限,需要sudo或su之后执行.但这 ...
- UIView画虚线边框
//fatherView加虚线边框 -(void)boundingRectangleForView:(UIView *)fatherView{ CAShapeLayer *borderLayer = ...
- Java实现堆排序(大根堆)
堆排序是一种树形选择排序方法,它的特点是:在排序的过程中,将array[0,...,n-1]看成是一颗完全二叉树的顺序存储结构,利用完全二叉树中双亲节点和孩子结点之间的内在关系,在当前无序区中选择关键 ...