<p>【鼠标移动进去图片放大一倍效果：运用了-webkit-transform:scale(1.04)效果】</p>

如图：鼠标移动上去的时候图片放大一倍的效果，

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题文档</title>
  6. <style type="text/css">
  7. html{color:#333;background:#f3f3f3;}
  8. 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;}
  9. table{border-collapse:collapse;border-spacing:0;}
  10. fieldset,img{border:0;}
  11. address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}
  12. li{list-style:none;}
  13. caption,th{text-align:left;}
  14. h1,h2,h3,h4,h5,h6{font-size:100%;}
  15. q:before,q:after{content:'';}
  16. abbr,acronym{border:0;font-variant:normal;}
  17. sup{vertical-align:text-top;}
  18. sub{vertical-align:text-bottom;}
  19. input,textarea,select,strong{font-family:inherit;font-size:inherit;}
  20. input,textarea,select{*font-size:100%;}
  21. legend{color:#333;}
  22. .clear{height:0;font-size:0;line-height:0;clear:both; display:block;}
  23. body{font-size:12px;background-color:#f3f3f3;font-family:tahoma,verdana,arial,helvetica,sans-serif;text-align:center;color:#333; line-height:20px;}
  24. a{color:#816353;text-decoration:none;}
  25. a:hover{color:#c01313;}
  26. .clearfix{zoom:1;}.clearfix:after{content:'\0020';display:block;height:0;clear:both;}
  27.  
  28. .container{ width:980px; margin:15px auto; overflow:hidden; text-align:left;}
  29. .modul{ width:1000px;}
  30. .mod_title{ font-size:22px; font-family:"Microsoft YaHei"; height:24px; line-height:24px; font-weight:bold; color:#3d3d3d; display:block; margin-bottom:15px;}
  31. .modul li{ float:left; width:313px; margin-right:20px;}
  32. .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;}
  33. .mod_img{ cursor:pointer; max-width:100%; overflow:hidden; position:relative; height:190px;}
  34. .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%;}
  35. .mod_img a:hover img{-webkit-transform:scale(1.04);-moz-transform:scale(1.04);transform:scale(1.04);}
  36. .mod_detail{ padding:10px; background:#fff; font-size:12px;}
  37. .mod_detail:after{ content:''; display:block; clear:both;}
  38. .mod_detail .mod_avatar{ margin-top:26px; background-color:#fff; border:1px solid #e3e3e5; padding:5px; float:right;}
  39. .mod_detail .mod_avatar img{ width:50px; height:50px; vertical-align:top;}
  40. .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";}
  41. .mod_detail .mod_info{ color:#9f9f9f; margin-bottom:8px; line-height:16px; height:32px; overflow:hidden;}
  42. .mod_detail .mod_dete .ui_light{ color:#9f9f9f;}
  43. </style>
  44. </head>
  45.  
  46. <body>
  47. <div class="container">
  48.      <h3 class="mod_title">旅游设计师</h3>
  49.      <ul class="modul clearfix">
  50.          <li>
  51.              <div class="mod_show">
  52.                   <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>
  53.                   <div class="mod_detail">
  54.                        <div class="mod_avatar"><img src="http://www.bagtree.com/themes/bagtree_2011/images/touxian.gif"></div>
  55.                        <div class="mod_conten">
  56.                             <h3 class="mod_tit">站在历史和地理的正确一方</h3>
  57.                             <div class="mod_info">爱李白爱司马迁。闲时写瘦金体，弹琵琶曲，还能卜梅花易。背过八大菜系的40本菜谱，去过中国的每个省，为吃去旅行的金牛女。上班干QQ旅游，总也干不好，老被老板骂</div>
  58.                             <div class="mod_dete">设计师：<span class="ui_light">梁宁</span></div>
  59.                        </div>
  60.                   </div>
  61.              </div>
  62.          </li>
  63.          <li>
  64.              <div class="mod_show">
  65.                   <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>
  66.                   <div class="mod_detail">
  67.                        <div class="mod_avatar"><img src="http://www.bagtree.com/themes/bagtree_2011/images/touxian.gif"></div>
  68.                        <div class="mod_conten">
  69.                             <h3 class="mod_tit">站在历史和地理的正确一方</h3>
  70.                             <div class="mod_info">爱李白爱司马迁。闲时写瘦金体，弹琵琶曲，还能卜梅花易。背过八大菜系的40本菜谱，去过中国的每个省，为吃去旅行的金牛女。上班干QQ旅游，总也干不好，老被老板骂</div>
  71.                             <div class="mod_dete">设计师：<span class="ui_light">梁宁</span></div>
  72.                        </div>
  73.                   </div>
  74.              </div>
  75.          </li>
  76.          <li>
  77.              <div class="mod_show">
  78.                   <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>
  79.                   <div class="mod_detail">
  80.                        <div class="mod_avatar"><img src="http://www.bagtree.com/themes/bagtree_2011/images/touxian.gif"></div>
  81.                        <div class="mod_conten">
  82.                             <h3 class="mod_tit">站在历史和地理的正确一方</h3>
  83.                             <div class="mod_info">爱李白爱司马迁。闲时写瘦金体，弹琵琶曲，还能卜梅花易。背过八大菜系的40本菜谱，去过中国的每个省，为吃去旅行的金牛女。上班干QQ旅游，总也干不好，老被老板骂</div>
  84.                             <div class="mod_dete">设计师：<span class="ui_light">梁宁</span></div>
  85.                        </div>
  86.                   </div>
  87.              </div>
  88.          </li>
  89.      </ul>
  90. </div>
  91. </body>
  92. </html>

-webkit-transform:scale(1.04)放大缩小效果的更多相关文章

  1. 制作一个顶部图片可以拉伸放大缩小效果的tableViewHeader

    最近负责公司项目个人中心的项目模块研发,首页是一个头部图片可以拉伸放大缩小效果的tableViewHeader,今天这个demo和教程我增加了模糊效果和头像缩小效果.具体效果如图: 如果这个效果是想要 ...

  2. css scale 元素放大缩小效果

    <style> .trans-scale { width: 300px; height:300px; margin:100px auto; background:#99F; transit ...

  3. 自定义ImageView实现图片手势滑动，多点触摸放大缩小效果

    首先呢,还是一贯作风,我们先来看看众多应用中的示例:(这种效果是很常见的,可以说应用的必须品.)                搜狐客户端                               ...

  4. 纯CSS实现内容放大缩小效果

    先搭架子 再实现第一个内容 填充更多内容 拆掉border,查看最终效果 html代码 <!-- 服务 --> <div class="service"> ...

  5. html 图片在一个div中放大缩小效果

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  6. vue项目 一行js代码搞定点击图片放大缩小

    一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...

  7. css----动画（图片无限放大缩小）

    先给大家推荐animate.css库,里面有一些效果很不错的过度样式,不想自己写的也可以直接安装这个库来使用,如果不想安装这个库也可以去https://daneden.github.io/animat ...

  8. 用css3实现图片的放大缩小

    记录一个公用的css实现图片的放大缩小 @keyframes scaleDraw { /*定义关键帧.scaleDrew是需要绑定到选择器的关键帧名称*/ 0%{ transform: scale(1 ...

  9. imageView图片放大缩小及旋转

    imageView图片放大缩小及旋转 一.简介 二.方法 1)设置图片放大缩小效果 第一步:将<ImageView>标签中的android:scaleType设置为"fitCen ...

随机推荐

  1. linux笔记五-------编辑器

    1. 三种模式    命令(默认).尾行.编辑模式 2. 尾行模式    :    :q      退出vi编辑器    :w      保存修改    :wq     保存并退出编辑    :q!  ...

  2. 一次有趣的XSS漏洞挖掘分析（1）

    最近认识了个新朋友,天天找我搞XSS.搞了三天,感觉这一套程序还是很有意思的.因为是过去式的文章,所以没有图.但是希望把经验分享出来,可以帮到和我一样爱好XSS的朋友.我个人偏爱富文本XSS,因为很有 ...

  3. ajax测试Demo以及json简单的转化

    Ajax是局部刷新,并不影响页面其他的操作 实例1:本测试是演示利用Ajax在一个页面播放视频,点击赞和踩按钮,视频不会受影响, 新建一个ajaxTest.html页面 <!DOCTYPE ht ...

  4. 四则运算之C++实现篇

    对四则运算的一些要求如下: 1.题目避免重复:2.可定制(数量/打印方式):3.可以控制下列参数:   是否有乘除法.数值范围.加减有无负数.除法有无余数.否支持分数 (真分数, 假分数, …): 一 ...

  5. 禁止COOKIE后对SESSION的影响

    一.理解SESSION机制 简单来说:每一个SESSION都有一个唯一的session_id , 默认情况下,session_id存储在客户端(默认COOKIE['PHPSESSID']), 在使用S ...

  6. 【转】NGUI研究院之为什么打开界面太慢（十三）

    NGUI打开界面太慢了,起初一直以为是unity的问题,最近经过我的全面测试我发现这和unity没有关系.一般一个比较复杂的界面大概需要150个GameObject  或者 UISprite .我用N ...

  7. python display color output

    起因 在开发项目过程中,为了方便调试代码,经常会向stdout中输出一些日志,默认的这些日志就直接显示在了终端中.而一般的应用服务器,第三方库,甚至服务器的一些通告也会在终端中显示,这样就搅乱了我们想 ...

  8. An AVPlayerItem cannot be associated with more than one instance of AVPlayer错误

    An AVPlayerItem cannot be associated with more than one instance of AVPlayer An AVPlayerItem cannot ...

  9. 字符串数组(String []) 去掉重复值的方法

    public class Demo { /** * 去掉重复值 */ public static void main(String[] args) { String test = "100, ...

  10. html中表table行循环滚动例子

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><meta h ...