鼠标经过容器放大--css3
<!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的更多相关文章
- 基于CSS3鼠标滑过放大突出效果
还记得之前分享过一款CSS3图片悬停放大特效,效果非常不错.今天我们要再来分享一款类似的CSS鼠标滑过放大突出效果,只不过之前那个是图片,这次是色块,其实掌握了其CSS原理,任何网页元素都可以实现这种 ...
- 浅谈CSS和JQuery实现鼠标悬浮图片放大效果
对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...
- JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题
1.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种 ...
- jQuery鼠标悬停图片放大显示
jQuery鼠标悬浮放于图片上之后图片放大显示的效果,即鼠标移到图片上图片突出显示,鼠标移开后恢复原来的模样,你可以在图片滚动效果中加上本特效,相信会更炫一些. <!DOCTYPE html P ...
- 鼠标滚轮图片放大缩小功能,使用layer弹框后不起作用
今天在项目中遇到的一个问题:点击按钮使用layer弹框弹出一张图片,需要加一个鼠标滚轮放大缩小,图片也跟着放大缩小的功能.于是在网上找了一个demo. DEMO: <!DOCTYPE html ...
- 2015.10.11(js判断鼠标进入容器的方向)
判断鼠标进入容器的方向 1.前几天在万圣节专题项目中用到了鼠标坐标page事件,随着鼠标背景图片移动形成有层次感的效果,但page事件在IE低版本不支持,所以还要做兼容.在研究page事件同时无意中想 ...
- 常用css样式(文字超出部分用省略号显示、鼠标经过图片放大、出现阴影)
文字超出部分用省略号显示: white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分不显示 */ text-overflow: ellipsis ...
- [Unity3D]Unity3D游戏开发之鼠标滚轮实现放大缩小
今天为大家分享的是在Rpg游戏中十分常见的鼠标滚轮调整摄像机视野效果.首先我们先创建一个游戏场景: 接下来我们编写一段脚本代码: [csharp] view plaincopyprint" ...
- jquery图片放大插件鼠标悬停图片放大效果
都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
随机推荐
- c++中char*\wchar_t*\string\wstring之间的相互转换
string U2A(const wstring& str)//Unicode字符转Ascii字符 { string strDes; if ( str.empty() ) goto __end ...
- 如何通过Button获取UITableViewCell
发现一个奇怪的问题: 手机(ios7) 2015-06-17 15:11:29.323 ***[1412:60b] [btn superview] = UITableViewCellContent ...
- BZOJ 1488: [HNOI2009]图的同构 polay
题意:两个图AB同构:把A的顶点重新编号后与B一模一样.求n个顶点的图一共有多少个?(同构的算一种) 思路:边有n*(n-1)/2,这些边可以有可以没有,所以等同于边的颜色有两种.然后将n划分成循环节 ...
- js九宫格的碰撞检测
说来惭愧,我一直以为四四方方的拖拽碰撞检测是一个比较容易的事情,后来试过一次,真是让我耗费了无数的脑细胞,原理其实不难,但是具体做起来可就让我很恶心,这可能跟我驾驭的代码数量有关系,我一般也就写半屏幕 ...
- 3d中的向量
向量基础知识 向量有且仅有的两个属性:方向长度(注意:向量性情中不包含位置信息) 向量相等就是其两个属性相等 向量处理标记位置:当向量的起始点与坐标原点重合,这样我们就可以用向量的终点坐标来描述一个处 ...
- jquery之 css()方法。用法类似的有attr(),prop(),val()
[注]attr(),prop(),val()的用法结构和css()一致,可参考 css()函数用于设置或返回当前jQuery对象所匹配的元素的css样式属性值. 该函数属于jQuery对象(实例).如 ...
- CentOS 7下编译FreeSWITCH 1.6
安装背景: 已经最小化安装CentOS 7. 准备工作: 挂载安装光盘,配置yum本地化安装,配置方法可以参考http://www.cnblogs.com/yoyotl/p/4877439.html. ...
- 梯度下降法VS随机梯度下降法 (Python的实现)
# -*- coding: cp936 -*- import numpy as np from scipy import stats import matplotlib.pyplot as plt # ...
- ubuntu下解压zip文件乱码
安装unar 即可解决问题 sudo apt get install unar
- C library function - tmpfile()
Description The C library function FILE *tmpfile(void) creates a temporary file in binary update mod ...