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原理,任何网页元素都可以实现这种 ...
随机推荐
- vue-pdf的3.3.1版本build后多生成168个js文件
当同事使用vue-pdf来浏览pdf之后,就发现build之后一堆散乱的js文件,真可怕! 果然google之后是它的原因.参考:Vue-pdf create 168 excess bundles i ...
- LINQ-Where子句与select子句
1.Where子句 where子句的作用就是筛选元素,除了开始喝结束位置,where子句几乎可以出现在LINQ表达式的任意位置.一个LINQ表达式中可以有Where子句,也可以没有:可以有一个,可以有 ...
- 使用xml4j xml与字符串之间转换
jar准备:dom4j-2.1.1.jar jaxen-1.1.6.jar jaxen/jaxen/ Maven依赖写法 <dependency> <groupId>jaxe ...
- [LeetCode]Combination Sum题解(DFS)
Combination Sum Given a set of candidate numbers (C) (without duplicates) and a target number (T), f ...
- Windows命令行方式执行OracleSQL脚本
调用格式 sqlplus user/pwd@orcl @F:\DB_BAKFile\createpro.sql>>F:\DB_BAKFile\log\createpro.log SQL脚本 ...
- BZOJ1968 [Ahoi2005] 约数研究
Description Input 只有一行一个整数 N(0 < N < 1000000). Output 只有一行输出,为整数M,即f(1)到f(N)的累加和. Sample Input ...
- asp.net修改上传文件大小
我们大家都知道ASP.NET为我们提供了文件上传服务器控件FileUpload,默认情况下可上传的最大文件为4M,如果要改变可上传文件大小限制,那么我们可以在web.config中的httpRunti ...
- JDBC中常用对象介绍
JDBC中的主要类(接口) 在JDBC中常用的类有: 1.DriverManager 2.Connection 3.Statement 4.ResultSet 1.DriverManager 其实我们 ...
- Keras 自适应Learning Rate (LearningRateScheduler)
When training deep neural networks, it is often useful to reduce learning rate as the training progr ...
- [算法练习]Add Two Numbers
题目说明: You are given two linked lists representing two non-negative numbers. The digits are stored in ...