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原理,任何网页元素都可以实现这种 ...

随机推荐

JQuery语法 JQuery对象与原生对象互转文档就绪函数与window.onload的区别
[JQuery语法] 1.jQuery("选择器").action();通过选择器调用事件函数,但是jquery中,jquery可以用$(“选择器”).action(); ① ...
zabbix自动发现与自动注册及SNMP监控
自动发现与自动注册自动发现:zabbix Server主动发现所有客户端,然后将客户端登记自己的小本本上,缺点zabbix server压力山大(网段大,客户端多),时间消耗多. 自动注册:zabb ...
ContextMenustrip 控件
ContextMenustrip 控件是由 System.Windows.Forms.ContextMenustrip类提供,也是ToolstripMenu对象的容器,用来创建窗体的右键显示的菜单,主 ...
JSON 教程
1JSON 1.什么是 JSON ? 1.1JSON:JavaScript 对象表示法(JavaScript Object Notation). 1.2JSON 是存储和交换文本信息的语法.类似 XM ...
wpf 窗口最小化后，触发某事件弹出最小化窗口并置顶
//如果窗口最小化了弹出并置顶----事件触发调用 ShowWindowAsync(new System.Windows.Interop.WindowInteropHelper(CommonHelpe ...
springMVC 静态资源加版本号
springMVC 静态资源加版本号 http://blog.csdn.net/zhangt85/article/details/42126275
bnu 10783 格斗游戏线段与圆的关系
格斗游戏 Time Limit: 1000ms Memory Limit: 65536KB 64-bit integer IO format: %lld Java class name: ...
基于注解的简单SSH保存用户小案例
需求:搭建SSH框架环境,使用注解进行相关的注入(实体类的注解,AOP注解.DI注入),保存用户信息效果: 一.导依赖包二.项目的目录结构三.web.xml配置 <?xml version ...
关于java赋值运算的一个小例子
直接贴代码,这个也是做题目中遇见的,觉得很好奇,查了一波,然后自己编写代码看了一下,果真如此,哈哈哈...... public class 关于Boolean的赋值运算 { public static ...
sql-pivot
PIVOT PIVOT运算符用于在列和行之间进行数据旋转或透视转换,同时执行聚合运算 ,,) Order By empid asc Select * From ( Select empid,YEAR( ...

css3—产品列表之鼠标滑过效果

css3—产品列表之鼠标滑过效果的更多相关文章

随机推荐

热门专题