css动画鼠标移入有个从四周延长的线框和不同内容
2018-11-23 本文已影响3人
Lia代码猪崽
demo.gif
在动画效果方面,有想过用animation
做的,但是当鼠标移走,就不会有淡出的效果而是一下子全没了,所以最后用的transaction
。
附上等下会用到的
icon.pngicon.png
:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>卡片demo</title>
<style>
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: #f1fbfe;
}
.card {
margin-top: 100px;
margin-left: auto;
margin-right: auto;
position: relative;
width: 300px;
height: 150px;
background-color: #f7fdfe;
box-shadow: 1px 1px 15px #cddff0
}
/*normal*/
.normal {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: block;
}
.normal .icon {
margin-left: 100px;
display: block;
width: 100px;
height: 100px;
}
.normal .icon img {
width: 100%;
height: 100%;
}
.normal .text {
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
}
/*active*/
.active {
position: absolute;
left: 10px;
top: 10px;
width: calc(100% - 20px);
height: calc(100% - 20px);
}
.active span {
position: absolute;
background: #0DC316;
transition: all .3s;
-moz-transition: all .3s; /* Firefox 4 */
-webkit-transition: all .3s; /* Safari and Chrome */
-o-transition: all .3s; /* Opera */
}
.active .left-top {
left: 0;
top: 0;
width: 0;
height: 2px;
}
.active .right-top {
right: 0;
top: 0;
width: 2px;
height: 0;
}
.active .left-bottom {
left: 0;
bottom: 0;
width: 2px;
height: 0;
}
.active .right-bottom {
right: 0;
bottom: 0;
width: 0;
height: 2px;
}
.active .content {
display: none;
position: absolute;
left: 10px;
top: 50%;
width: calc(100% - 20px);
text-align: left;
color: #333333;
text-indent: 2em;
transform: translateY(-50%);
}
/*hover .card*/
.card:hover {
background-color: #fff;
}
.card:hover .normal {
display: none;
}
.card:hover .active .left-top, .card:hover .active .right-bottom {
width: 100%;
}
.card:hover .active .right-top, .card:hover .active .left-bottom {
height: 100%;
}
.card:hover .active .content {
display: block;
}
</style>
</head>
<body>
<div class="card">
<div class="normal">
<div class="icon">
<img src="./icon.png">
</div>
<div class="text">健康关怀</div>
</div>
<div class="active">
<span class="left-top"></span>
<span class="right-top"></span>
<span class="left-bottom"></span>
<span class="right-bottom"></span>
<div class="content">员工每年可以享受一次免费的年度体检。</div>
</div>
</div>
</body>
</html>
注意,不能直接让整个一个
.active
在.card:hover
时display: none;
,不然会没有动画的;只隐藏其中的文字.content
就可以了。