效果图:
鼠标悬停的时候三角向左变大直到彻底覆盖,文字缓慢显示。用CSS3完成整个效果,主要是三角形的写法
具体代码以下:css
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3三角叠加效果</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="content-item"> <div class="overlays"></div> <div class="info">Info</div> <div class="text"> <h3>标题</h3> <p>这是一段文字,这是一个三角叠加特效</p> </div> </div> <div class="content-item"> <div class="overlays"></div> <div class="info">Info</div> <div class="text"> <h3>标题</h3> <p>这是一段文字,这是一个三角叠加特效</p> </div> </div> <div class="content-item"> <div class="overlays"></div> <div class="info">Info</div> <div class="text"> <h3>标题</h3> <p>这是一段文字,这是一个三角叠加特效</p> </div> </div> <div class="content-item"> <div class="overlays"></div> <div class="info">Info</div> <div class="text"> <h3>标题</h3> <p>这是一段文字,这是一个三角叠加特效</p> </div> </div> </body> </html>
@charset "utf-8";
/* css Document*/
body,div,h3,p,h2{margin: 0;padding: 0;}
.content-item{
position: relative;
width: 300px;
height: 200px;
float: left;
margin: 0 10px;
background: url(images/4.jpg) no-repeat;
overflow: hidden;
}
.text{
position: absolute;
padding: 3px;
opacity: 0;
left: 20px;
top: 50px;
transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
color: white;
}
.text h3{
border-bottom: 1px solid #333;
padding-bottom: 12px;
}
.text p{
line-height: 50px;
font-weight: normal;
font-family: "微软雅黑";
font-size: 15px;
}
.info{
position: absolute;
right: 15px;
bottom: 15px;
color: #000;
font-size: 12px;
transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
}
.overlays{
position: absolute;
right: 0;
bottom: 0;
border-bottom: 100px solid rgba(0,0,0,0.8);
border-left:100px solid rgba(0,0,0,0);
opacity: 0.8;
transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
}
.content-item:hover .overlays{
border-bottom: 600px solid rgba(0,0,0,0.8);
border-left: 600px solid rgba(0,0,0,0);
}
.content-item:hover .info{
opacity: 0;
}
.content-item:hover .text{
opacity: 1;
transition: all 0.5s ease-out 0.2s;
-moz-transition: all 0.5s ease-out 0.2s;
-ms-transition: all 0.5s ease-out 0.2s;
-webkit-transition: all 0.5s ease-out 0.2s;
-o-transition: all 0.5s ease-out 0.2s;
}
代码中图片的路径以及CSS的连接方式须要改动一下。html