您的位置：首页 > Web前端 > CSS

使用css3伪元素实现遮罩效果

2016-03-03 15:36 417 查看

使用css3伪元素实现遮罩效果

效果图：



实现代码：

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
body {
font-family: '微软雅黑', Calibri, Arial, sans-serif;
color: #89867e;
background: #f9f9f9;
}

*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

a {
text-decoration: none;
outline: none;
}

a img {
border: none;
}
/* pic1 css */
.caption {
display: inline-block;
position: relative;
margin: 10px;
width:400px;
}

.caption img {
display: block;
max-width: 100%;
}

.caption::before,
.caption::after {
position: absolute;
width: 100%;
color: #fff;
padding: 20px;
opacity: 0;
z-index: 1;
-webkit-transition: opacity .3s;
-moz-transition: opacity .3s;
transition: opacity .3s;
}

.caption::before {
content: attr(data-title);
top: 0;
height: 10%;
line-height:10%;
background: rgb(197, 71, 26);
font-size: 24px;
font-weight: 300;
}

.caption::after {
content: attr(data-description);
top: 70%;
height: 30%;
background: #a21f00;
font-size: 16px;
text-align: right;
}

.caption:hover::before,
.caption:hover::after {
opacity: 0.5;
}
/* pic2 css*/
.caption2 {
display: inline-block;
position: relative;
margin: 10px;
overflow: hidden;
background: #000;
width:400px;
}

.caption2 img {
display: block;
max-width:100%;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}

.caption2:hover img {
opacity: 0.5;
}

.caption2::before,
.caption2::after {
position: absolute;
background: #fff;
width: 100%;
height: 50%;
color: #fff;
padding: 20px;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
-moz-transition: -moz-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
}

.caption2::before {
content: attr(data-title);
top: 0;
z-index: 1;
background: #B87046;
font-size: 40px;
font-weight: 300;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
transform: translateY(-100%);
}

.caption2::after {
content: attr(data-description);
top: 50%;
background: #E6453E;
font-size: 16px;
text-align: left;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
transform: translateY(100%);
}

.caption2:hover::before,
.caption2:hover::after {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);
}
</style>
</head>
<body>
<form id="form1">
<dvi style="display:flex">
<div style="flex:1">
<a
class="caption"
href="#"
data-title="甘佳怡" data-description="【我可爱的侄女】感觉今天萌萌哒。。。。。。">
<img src="http://b134.photo.store.qq.com/psb?/V11B2A9e4Vdx3c/KT8v03HPItBFZCQCnxL4tS.khGempZdfVIiUQ8Ci.yI!/b/dH6D7E88FQAA&bo=gAJVA*UDRgUBCkw!&rf=viewer_4" alt="littlecute">
</a>
</div>
<div style="flex:3;height:534px" >

<a
class="caption2"
href="#"
data-title="MajorMayer" data-description="艾玛。。差点吓死我了，这是谁呀，长得太抽象了！！！ ^_^,^_^,^_^,^_^">
<img src="http://b131.photo.store.qq.com/psb?/V11B2A9e3499j5/Vdyb3Iew40nVtSjQOQeCfSwMJqHwCy4lDBIGD3cLiOU!/b/dIMAAAAAAAAA&bo=KwQgAwAFwAMFCOE!&rf=viewer_4" alt="majormayer">
</a>
<br />
【实现原理】：<br />
通过css3伪元素:：efore来绘制上半部分遮罩，::after来实现下半部分遮罩。<br />
使用content: attr(data-descr);来设置伪元素中内容为设置元素属性attr<br />
你还可以查看用伪元素实现tootip效果的文章：[这里写链接内容](http://blog.csdn.net/majormayer/article/details/50574952)
</div>
</dvi>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航