css3展开遮罩

浏览数：23 / 时间：2015年06月09日

设置遮罩层（.ch-info）opacity:0（opacity是设置div的不透明级别，0的时候即是隐藏），鼠标经过.ch-item的时候那么.ch-info的opacity参数为1，.ch-item:hover .ch-info {opacity:1}，同时设置scale(1)（scale为放大的倍数，1即是1倍，若设置成10，那么.ch-item就会被放大10倍）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>

.huisuo-warp{ margin:0 auto; width:100%; height:auto; }
.youshi{width:1080px; height:650px;margin:0 auto; }
.youshi-title{ font-size:30px; letter-spacing:2px; color:#333; padding:30px 0 0;}
.youshi-title p{ margin-top:10px;}

.ch-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}

.ch-grid:after,
.ch-item:before {
content: ‘‘;
display: table;
}

.ch-grid:after {
clear: both;
}

.ch-grid li {
width: 200px;
height: 200px;
display: inline-block;
margin: 30px;
}
.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
cursor: default;
box-shadow:
inset 0 0 0 5px rgba(255,255,255,0.6),
0 1px 2px rgba(0,0,0,0.1);

-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}

.ch-img-1 {
background-color:#E78C57;
}

.ch-img-2 {
background-color:#EFC531;
}

.ch-img-3 {
background-color:#41CEC8;
}
.ch-img-4 {
background-color:#78CB3D;
}
.ch-img-5 {
background-color:#41CEC8;
}
.ch-img-6 {
background-color:#EFC531;
}
.ch-img-7 {
background-color:#78CB3D;
}
.ch-img-8 {
background-color:#E78C57;
}
.ch-info {
position: absolute;
background: rgba(63,147,147, 0.8);
width: inherit;
height: inherit;
border-radius: 50%;
opacity: 0;

-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;

-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);

-webkit-backface-visibility: hidden;

}

.ch-info h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 22px;
margin: 0 30px;
padding: 45px 0 0 0;
height: 100px;

text-shadow:
0 0 1px #fff,
0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
font-family:"微软雅黑";
color: #fff;
font-size:14px;
padding: 1px 5px;
margin: 40px 25px 10px 28px;
font-size: 15px;
letter-spacing:2px;
line-height:20px;
text-align:left;
opacity: 1;
-webkit-transition: all 1s ease-in-out 0.4s;
-moz-transition: all 1s ease-in-out 0.4s;
-o-transition: all 1s ease-in-out 0.4s;
-ms-transition: all 1s ease-in-out 0.4s;
transition: all 1s ease-in-out 0.4s;
}

.ch-info p a {
display: block;
color: #fff;
color: rgba(255,255,255,0.7);
font-style: normal;
font-weight: 700;
text-transform: uppercase;
font-size: 9px;
letter-spacing: 1px;
padding-top: 4px;
font-family: ‘Open Sans‘, Arial, sans-serif;
}

.ch-info p a:hover {
color: #fff222;
color: rgba(255,242,34, 0.8);
}

.ch-item:hover {
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.1),
0 1px 2px rgba(0,0,0,0.1);
}
.ch-item:hover .ch-info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}

.ch-item:hover .ch-info p {
opacity: 1;
}

</style>
</head>

<body>
<article class="youshi">
<div class="youshi-title" style="margin:0 auto; text-align:center;">产品核心优势<p><img src="images/line2.jpg"/></p>
</div>

<ul class="ch-grid">
<li>
<div class="ch-item ch-img-1">
<div class="ch-info">
<p>结算自动打印，币种分别统计，各类单据可以方便地查询，操作痕迹清晰保留，帮助管理者监控收银</p>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-2">
<div class="ch-info">
<p>会员刷卡信息一目了然；单据自动更新，无需手工单据传递和计算；消费单消费情况清清楚楚</p>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-3">
<div class="ch-info">
<p>帮助出纳和收银无错误地快速核对；方便查核核对和财务管理；根据时间段了解会员的消费情况</p>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-4">
<div class="ch-info">
<p>方便对会员的个性化服务，支持各类会员卡，支持会员储值，进行会员价、会员折扣、会员积分管理</p>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-5">
<div class="ch-info">
<p>实时监控场所内营业情况；给出消费品项的销售情况统计；制定时间段内会员的消费情况统计；营业报表..</p>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-6">
<div class="ch-info">
<p>库存单据全部电脑保存，清清楚楚、查询方便，库存台帐、库存统计表、采购情况详细明晰</p>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-7">
<div class="ch-info">
<p>连锁店会员账目可以随时同步，营业数据按时上传，会员可以在各家连锁店消费，手机智能查询简单、实用..</p>
</div>
</div>
</li>
<li>
<div class="ch-item ch-img-8">
<div class="ch-info">
<p>功能全面，最专业的管理软件，在全国范围内有近二十家核心代理，客户遍布全国，受到大量用户一致好评。</p>
</div>
</div>
</li>

</ul>

</article>