css3—产品列表之鼠标滑过效果
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>实例: css3技巧——产品列表之鼠标滑过效果</title>
<style>
.main *{
padding:0;
margin:0;
font-family:'Source Code Pro', Menlo, Consolas, Monaco, monospace;
box-sizing: border-box;
-webkit-box-sizing: border-box; }
.main {
position: relative;
width: 680px;
margin: 0 auto;
}
.view {
width: 300px;
margin: 10px;
float: left;
border: 10px solid #fff;
-webkit-box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6;
-ms-box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6;
cursor: default;
}
.view figure {
margin: 0;
position: relative;
}
.view figure img {
max-width: 100%;
display: block;
position: relative;
}
.view .thumb {
overflow: hidden;
}
.view .mask {
position: absolute;
top: 0;
left: 0;
bottom:0;
padding: 10px;
background: rgb(233, 194, 236);
background-color: rgba(233, 194, 236, 0.9);
color: #ed4e6e;
}
.view .mask h2 {
margin: 0 0 5px;
padding: 0 0 5px;
color: #fff;
font-size: 18px;
text-align: center;
border-bottom:1px solid rgba(255,255,255,.2);
}
.view .mask p{
font-size: 14px;
}
.view .link {
position: absolute;
bottom: 10px;
right: 10px;
text-align: center;
padding: 5px 10px;
border-radius: 2px;
display: inline-block;
background: #ed4e6e;
color: #fff;
text-decoration:none;
font-size: 14px;
}
.view-tenth {
-webkit-perspective: 1700px;
-moz-perspective: 1700px;
-ms-perspective: 1700px;
-o-perspective: 1700px;
perspective: 1700px;
-webkit-perspective-origin: 0 50%;
-moz-perspective-origin: 0 50%;
-ms-perspective-origin: 0 50%;
-o-perspective-origin: 0 50%;
perspective-origin: 0 50%;
}
.view-tenth figure {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.view-tenth .mask {
width: 100%;
opacity: 0;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-ms-transform: rotateY(-90deg);
-o-transform: rotateY(-90deg);
transform: rotateY(-90deg);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
-ms-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
-o-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
}
.view-tenth figure:hover .mask{
opacity: 1;
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
-ms-transition: -moz-transform 0.4s, opacity 0.1s;
-o-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;
}
</style>
</head>
<body>
<div class="demo-container demo">
<div class="main">
<div class="view view-tenth">
<figure>
<div class="thumb"><img src="http://tupian.enterdesk.com/2014/lxy/2014/04/11/2/5.jpg" /></div>
<div class="mask">
<h2>Wonder Girls</h2>
<p>Wonder Girls一向以青春活力的形象展现在观众面前，先后在韩国和...</p>
<a href="#" class="link">查看全文</a>
</div>
</figure>
</div>
<div class="view view-tenth">
<figure>
<div class="thumb"><img src="http://tupian.enterdesk.com/2014/lxy/2014/04/11/2/3.jpg" /></div>
<div class="mask">
<h2>Wonder Girls</h2>
<p>Wonder Girls一向以青春活力的形象展现在观众面前，先后在韩国和...</p>
<a href="#" class="link">查看全文</a>
</div>
</figure>
</div>
<div class="view view-tenth">
<figure>
<div class="thumb"><img src="http://tupian.enterdesk.com/2014/lxy/2014/04/11/2/10.jpg" /></div>
<div class="mask">
<h2>Wonder Girls</h2>
<p>Wonder Girls一向以青春活力的形象展现在观众面前，先后在韩国和...</p>
<a href="#" class="link">查看全文</a>
</div>
</figure>
</div>
<div class="view view-tenth">
<figure>
<div class="thumb"><img src="http://tupian.enterdesk.com/2014/lxy/2014/04/11/2/11.jpg" /></div>
<div class="mask">
<h2>Wonder Girls</h2>
<p>Wonder Girls一向以青春活力的形象展现在观众面前，先后在韩国和...</p>
<a href="#" class="link">查看全文</a>
</div>
</figure>
</div>
</div></div>
</body>
</html>
来源：http://www.daqianduan.com/6134.html
注：不兼容IE
css3—产品列表之鼠标滑过效果的更多相关文章
- css3技巧——产品列表之鼠标滑过效果(一)
查看效果: http://www.daqianduan.com/example?pid=6117 html代码: <div class="main"> <div ...
- css3技巧——产品列表之鼠标滑过效果translateY(三)
<div class="main"> <div class="view view-tenth"> <figure> < ...
- Css3 常见鼠标滑过效果集合
1.演示地址: http://yaochuxia.github.io/hover/#
- css3为图片添加鼠标移入放大效果
只需要为添加效果的图片定义一个伪类 img.zoom-img:hover { -webkit-transform: scale(1.15); -webkit-transition-timing-fun ...
- css3样式控制（鼠标滑过 显示标注信息）
<div class="item"> <h1>A</h1> <div class="tooltip"> < ...
- css3-鼠标经过产品列表 图片放大 显示文字 （兼容IE9以上 不含IE9）
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title&g ...
- 9种CSS3 blend模式制作的鼠标滑过图片标题特效
这是一款使用CSS3 background-blend-mode制作的鼠标滑过图片标题特效.该图片标题特效在鼠标滑过一张图片的时候,图片的标题会对应的动画,而且图片会使用css blend模式渲染为很 ...
- jQuery实现鼠标滑过图片列表加遮罩层
这个例子实现的功能是:有一列图片列表,鼠标滑过时,将有遮罩层的另一张图盖在该图片的上方,实现鼠标hover的效果. 一.HTML代码: <div class="home-content ...
- 基于CSS3鼠标滑过放大突出效果
还记得之前分享过一款CSS3图片悬停放大特效,效果非常不错.今天我们要再来分享一款类似的CSS鼠标滑过放大突出效果,只不过之前那个是图片,这次是色块,其实掌握了其CSS原理,任何网页元素都可以实现这种 ...
随机推荐
- table 中的tr 行点击 变换颜色背景
<style> table{border-collapse: collapse;border-spacing: 0; width: 100%;} table tr th,td{border ...
- ashx 绝对路径得到物理路径
//先得到模板页所在的路径 string phyPath = context.Server.MapPath("/p02style.html"); //得到模板的所有内容 strin ...
- Vue学习笔记：Ref的使用
官网上的说明 1.了解Vue中的$refs在Vue中是怎么访问到DOM元素的 <div id="app"> <h1>{{ message }}</h1 ...
- 秒懂String，StringBuilder与StringBuffer
StringBuilder与StringBuffer: StringBuilder:线程不安全 StringBuffer:线程安全 当我们在字符串缓冲区被多个线程使用时,JVM不能保证StringBu ...
- 工作经验：mybatis 处理 oracle Long 类型
前言:mybatis 接收 oracle 中 LONG 类型的,报错:无效的列类型: getCLOB not implemented for class oracle.jdbc.driver.T4CL ...
- HTML标签类型
标签分类: 一.块标签:块标签是指本身属性为display:block;的元素. 1.默认占一行可以设置宽高, 2.在不设置宽度的情况下,块级元素的宽度是它父级元素内容的宽度 3.在不设置高度的情况下 ...
- CentOS6下docker的安装和使用
CentOS6下docker的安装和使用 Docker是一个开源的应用容器引擎,可以轻松的为任何应用创建一个轻量级的.可移植的.自给自足的容器.利用Linux的LXC.AUFS.Go语言.cgroup ...
- BZOJ4903: [Ctsc2017]吉夫特
传送门 可以发现,\(\binom{n}{m}\equiv 1(mod~2)\) 当且仅当 \(m~and~n~=~m\) 即 \(m\) 二进制下为 \(n\) 的子集 那么可以直接写一个 \(3^ ...
- BZOJ2960：跨平面
题面 BZOJ Sol 对该平面图的对偶图建图后就是最小树形图,建一个超级点向每个点连 \(inf\) 边即可 怎么转成对偶图,怎么弄出多边形 把边拆成两条有向边,分别挂在两个点上 每个点的出边按角度 ...
- 理解bind函数
前言:之前一直不懂这个函数是干嘛的,最近慢慢有点懂了,说一说自己的理解~ 本文按以下3个方面来谈谈bind函数 1)对bind函数的理解: 2)如何使用bind函数 3)自定义bind函数 (http ...