<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="container">
<ul class="clearfix">
<li>
<img src="data:images/xy_52.jpg" alt=""/>
</li>
<li>
<h5>我是标题</h5>
<p>我是好人我是好人我是好人我是好人我是好人我是好人</p>
</li>
</ul>
</div>
</body>
</html>

html

        *{margin:;padding:;}
.clearfix{zoom:;}
.clearfix:after{content:".";display:block;width:;height:;visibility:hidden;clear:both;}
.container{width:600px;margin:20px auto;}
ul{list-style:none;width:200px;background:red}
ul li{float:left;width:100px;height:100px;transition:all 1s linear 0;background:green;}
ul li:hover{transform:scale(1.2);background:yellow;}
ul li:hover p,ul li:hover h5{color:#fff;}
li img{border:;width:100%;}
h5{height:30px;line-height:30px;}
h5,p{font-size:12px;padding:0 6px;}
p{height:70px;}

css

鼠标经过容器放大--css3的更多相关文章

  1. 基于CSS3鼠标滑过放大突出效果

    还记得之前分享过一款CSS3图片悬停放大特效,效果非常不错.今天我们要再来分享一款类似的CSS鼠标滑过放大突出效果,只不过之前那个是图片,这次是色块,其实掌握了其CSS原理,任何网页元素都可以实现这种 ...

  2. 浅谈CSS和JQuery实现鼠标悬浮图片放大效果

    对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...

  3. JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题

    1.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种 ...

  4. jQuery鼠标悬停图片放大显示

    jQuery鼠标悬浮放于图片上之后图片放大显示的效果,即鼠标移到图片上图片突出显示,鼠标移开后恢复原来的模样,你可以在图片滚动效果中加上本特效,相信会更炫一些. <!DOCTYPE html P ...

  5. 鼠标滚轮图片放大缩小功能,使用layer弹框后不起作用

    今天在项目中遇到的一个问题:点击按钮使用layer弹框弹出一张图片,需要加一个鼠标滚轮放大缩小,图片也跟着放大缩小的功能.于是在网上找了一个demo. DEMO: <!DOCTYPE html ...

  6. 2015.10.11(js判断鼠标进入容器的方向)

    判断鼠标进入容器的方向 1.前几天在万圣节专题项目中用到了鼠标坐标page事件,随着鼠标背景图片移动形成有层次感的效果,但page事件在IE低版本不支持,所以还要做兼容.在研究page事件同时无意中想 ...

  7. 常用css样式(文字超出部分用省略号显示、鼠标经过图片放大、出现阴影)

    文字超出部分用省略号显示: white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分不显示 */ text-overflow: ellipsis ...

  8. [Unity3D]Unity3D游戏开发之鼠标滚轮实现放大缩小

    今天为大家分享的是在Rpg游戏中十分常见的鼠标滚轮调整摄像机视野效果.首先我们先创建一个游戏场景: 接下来我们编写一段脚本代码: [csharp] view plaincopyprint" ...

  9. jquery图片放大插件鼠标悬停图片放大效果

    都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

随机推荐

  1. PHP 对字符串进行十六进制替换 invalid character in attribute value

    最近在xml传输过程中遇到字符串报错,表面看上去没有任何错误.将文件用winhex打开,看到对应字符串中多了'1F'.xml无法解析'1F'.随后在代码中将这个替换掉. $str = pack(&qu ...

  2. Give My Text Back

    Give My Text Back 标签(空格分隔): 算法 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 To prepare for the English exa ...

  3. 利用MDK4中的逻辑分析仪分析IO口的PWM波

    1.先设置软件仿真 ,可参看STM32不完全手册的2.4的软件仿真这一章 (原文件名:1.jpg) Example functionality:                             ...

  4. [SAP ABAP开发技术总结]FTP到文件服务器,服务器上文件读写

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  5. poj 1474 Video Surveillance (半平面交)

    链接:http://poj.org/problem?id=1474 Video Surveillance Time Limit: 1000MS   Memory Limit: 10000K Total ...

  6. Ubuntu14.04设置开机root用户登录

    1.sudo vim /usr/share/lightdm/lightdm.conf.d/50-ubuntu.conf 2.添加:greeter-show-manual-login=true 3.su ...

  7. 函数(def)

    一.为什么要使用函数: 面向过程的编程在代码里有很多代码是可以重复利用的,如果使用面向过程编程会使代码显得纷繁复杂,不利于他人和自己日后的阅读.而在函数式编程里,则可以把每个可重复利用的功能封装在一个 ...

  8. hdu 5587 规律

    题意:开始序列{1}; 一次变换{1,1,2}: 两次变换{1,1,2,1,2,2,3} ... 求s[n];题解:打表 S1,S2,S4,S8,S16,S32......公式 S[n]=S[最近的比 ...

  9. CSS3 transition/transform

    Transition 1.简写属性transition,可以包括四个属性,这四个属性的顺序按照下面介绍的顺序书写,即transition:property duration timing-functi ...

  10. jQuery EasyUI DataGrid API 中文文档

        扩展自$.fn.panel.defaults,用 $.fn.datagrid.defaults重写了 defaults . 依赖 panel resizable linkbutton pagi ...