css3 缓动和左右下划线特效
2017-08-05 本文已影响0人
xiaoaiai
可以看下这两个特效的思路,由此推出别的特效的思路,其实都差不多的.
01.png
01.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.btn {
display: block;
margin: 100px auto;
position: relative;
width: 200px;
text-decoration: none;
text-align: center;
font-size: 20px;
color: #333;
}
.btn:before {
content: "";
position: absolute;
left: 50%;
bottom: -2px;
width: 0;
height: 1px;
background: #4285f4;
transition: all .3s;
}
.btn:hover:before {
width: 100%;
height: 2px;
left: 0;
}
.box {
margin: 0 auto;
width: 500px;
height: 300px;
border: 8px solid #F5F6F7;
margin-top: 10px;
position: relative;
overflow: hidden;
}
.box p {
width: 100%;
position: absolute;
bottom: 0px;
background: rgba(4, 58, 117, 1);
margin: 0;
opacity: 0;
transition: all 0.35s linear;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
text-indent: 20px;
color: white;
}
.box img {
display: block;
width: 100%;
height: 300px;
transition: all 0.35s linear;
position: absolute;
transform: rotate(0) translateY(0px);
}
.box:hover img {
transform: rotate(0deg) translateY(-35px);
}
.box:hover p {
opacity: 1;
}
</style>
</head>
<body>
<a href="#" class="btn">左右下划线</a>
<div class="box">
<p>Meat from the ribMeat from the ribMeat from the ribMeat from the ribMeat from the ribMeat from the rib section tends to be tender and well marbled with the fat that makes steaks and roasts juicy and fl.</p>
</div>
</body>
</html>
