現在這個過渡不太漂亮,但是如何在懸停後將此滑道向上滑動,並在懸停後向下滑動比現在好?
下面是該代碼 JSFiddle(太多的代碼)內容的淡入淡出
.employee-box {
border:2px solid #F9BA16;
background:#fff;
height:500px;
width:350px;
mediamax-width:480px {;
max-width:250px;
margin:0 auto 35px;
}
hr {
width:100%;
border-color:#fff;
border-width:6px;
margin:0 auto;
}
img {
max-height:430px;
padding:40px 0 20px;
}
.employee-more {
position:relative;
-webkit-transition:all .4s ease-out;
-o-transition:all .4s ease-out;
transition:all .4s ease-out;
imgposition:relative;
background:#fff;
border-radius:50%;
width:39px;
height:39px;
top:-20px;
left:43%;
padding:10px;
}
h1 {
text-align:center;
font-size:28px;
color:#fff;
padding-bottom:10px;
margin:-15px 0 0;
}
.details {
display:none;
text-align:center;
details-addressfont-size:20px;
font-style:italic;
}
i {
color:#fff;
border-radius:50%;
border:3px solid #fff;
width:40px;
height:40px;
font-size:22px;
fa-envelopepadding:6px 5px;
}
&.fa-phone {
padding:8px 0;
}
.details-contact {
font-size:30px;
color:#fff;
font-style:italic;
}
.details-desc {
font-style:italic;
font-size:14px;
padding:5px 10px;
}
.employee-rank {
position:absolute;
padding-top:40px;
bottom:-33px;
left:25%;
ppadding-bottom:32px;
text-align:center;
font-size:16px;
}
&:hover {
employee-moretop:-438px;
background:rgba(#F9BA16,.9);
height:465px;
transition:all .4s ease-in;
detailsdisplay:block;
}
*「更好」*是什麼意思?如果你想要一個不同的緩動函數,我建議你看立方貝塞爾計算。 –
我想改善目前的效果,讓他在顯示和隱藏時更平滑。 – Vertisan
我們無法決定對您來說更順暢嗎......這完全是主觀的。正如我所說,審查立方貝塞爾寬鬆。 –