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原理,任何网页元素都可以实现这种 ...
随机推荐
- java调用C++代码
一.在要使用到C++代码的类文件中声明一个native方法,例如: public class TestNative{ public native void test(); } 二.javac编译此ja ...
- eclipse下JAVA的搭建
练手JAVA用eclipse比android studio快很多,android studio啥都好,就是太慢 参考资料:http://blog.csdn.net/21aspnet/article/d ...
- Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)
前言 发现群里有些问题的提问重复率太高了,每次都去回答,回答的贼烦.这里做一个大体的汇总,废话不多说,直接开始给出方案,不是手把手..若是连问题和解决都看不懂的..应该去补充下基础知识 问题汇总 Q: ...
- ASP.NET 解决在点击Button执行服务器事件之前验证用户输入并阻塞
在网站项目开发时,为了减少用户的错误性的操作,很多时候我们都需要做一些必要的JS验证来提醒用户,比如:“输入的值不符合规则,请重新输入”.“提交后无法修改,您确定要继续吗?”友好性的提示. 这时候我们 ...
- ASP.NET 使用ajaxfileupload.js插件出现上传较大文件失败的解决方法（ajaxfileupload.js第一弹）
在写这篇的时候本来想把标题直接写成报错的提示,如下: “SecurityError:Blocked a frame with origin "http://localhost:55080&q ...
- Java基础教程(7)--运算符
现在,我们已经学会了如何声明和初始化变量,但你可能想知道如何操作它们.运算符是对一个,两个或三个操作数执行特定操作并返回结果的特殊符号.下表列出了Java中的运算符: 表格中的运算符是按照从上 ...
- Qless 相关知识
Qless是一个基于redis的分布式任务架构.相关代码在 https://github.com/seomoz/qless 它是完全有lua实现的,依靠 redis 对lua的支持,http://ww ...
- CodeForces 598A（水）
还是要注意int和long long的范围,以及double型的问题 pow函数经常会报一个double型的错,参考这篇文章 http://blog.csdn.net/lawrencesgj/arti ...
- protobuf版本冲突
在编译chromium代码的过程中发现,官方推荐使用的版本是ubuntu16.04,但是这个版本的ubuntu比较老旧,一些库都比较老了,但是google自己用的部分却是挺新的,protobuf就是一 ...
- PHP学习笔记（一） ---- PHP简介以及基本语法
PHP 一.PHP 简介 PHP(外文名:PHP: Hypertext Preprocessor,中文名:“超文本预处理器”)是一种通用开源脚本语言.语法吸收了C语言.Java和Perl的特点, 利于 ...