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原理,任何网页元素都可以实现这种 ...
随机推荐
- SQL Server中用While循环替代游标(Cursor)的解决方案
By行处理数据,推荐2种方式: 1.游标 2.While循环 我们来了解下这两种方案处理1w行数据分别需要多长时间. 一.游标. 首先我们填充一个表,用优雅的递归方式填充. ,) ) ;with ct ...
- jquery操作radio单选按钮，实现取值，动态选中，动态删除的各种方法
本文主要讲的是在jquery里操作表单radio单选按钮的各种方法,如获取选中的radio的值,动态选中指定的radio项等. 1.获取选中的radio单选按钮的值: var v=$(":r ...
- 三、synchronized同步锁
一.简介 在Java多线程中,我们要实现同步串行最早接触的就是synchronized关键字. 基本语法如下: synchronized(锁) { // 代码块 } sychronized关键字的锁主 ...
- Groovy内存机制详解
groovy每执行一次脚本,都会生成一个脚本的class对象,并new一个InnerLoader去加载这个对象. 所有的脚本都是由GroovyClassLoader加载的,每次加载脚本都会生成一个新的 ...
- golang 编码转化
在网上搜索golang编码转化时,我们经常看到的文章是使用下面一些第三方库: https://github.com/djimenez/iconv-go https://github.com/qiniu ...
- Struts2 (四) — 拦截器
一.拦截器 1.概述 1.1什么是拦截器 在struts2中,拦截器(Interceptor)是用来动态拦截Action执行的对象. 拦截器有点类似以前Servlet阶段的Filter(过滤器 ...
- 简单Json序列化和反序列化
序列化是什么: 序列化就是将一个对象的状态(各个属性量)保存起来,然后在适当的时候再获得.序列化分为两大部分:序列化和反序列化.序列化是这个过程的第一部分,将数据分解成字节流,以便存储在文件中或在网络 ...
- springcloud 实战 feign使用中遇到的相关问题
springcloud 实战 feign使用中遇到的相关问题 1.使用feign客户端调用其他微服务时,session没有传递成功,sessionId不一样. /** * @author xbchen ...
- HMTL label标签
label标签和特定表单控件关联之后,如果用户在 label 元素内点击文本,就会触发关联的表单控件.就是说,当用户选择该label标签时,浏览器就会自动将焦点转到和label标签相关的表单控件上. ...
- BZOJ4602: [Sdoi2016]齿轮(并查集 启发式合并)
题意 题目链接 Sol 和cc的一道题很像啊 对于初始的\(N\)个点,每加一条限制实际上就是合并了两个联通块. 那么我们预处理出\(val[i]\)表示的是\(i\)节点所在的联通块根节点转了\(1 ...