網(wǎng)站前端制作-不定高度的元素實(shí)現(xiàn)transition動(dòng)畫(huà)

在網(wǎng)站頁(yè)面的制作中，不少效果是由transition實(shí)現(xiàn)過(guò)渡動(dòng)畫(huà)做成的。最近的工作，需要做一個(gè)div的hover效果，hover的時(shí)候文字內(nèi)容自適應(yīng)高度即是height: 70px（固定高度）變化到height: auto; 從下往上產(chǎn)生一個(gè)過(guò)渡動(dòng)畫(huà)，過(guò)程中由中間圓形遮罩中間擴(kuò)散到消失，顯示底圖。
過(guò)程中，遇到的問(wèn)題有兩點(diǎn)：
關(guān)于不定高度的元素實(shí)現(xiàn)transition動(dòng)畫(huà)，制作過(guò)渡效果的過(guò)程中，發(fā)現(xiàn)height: auto;會(huì)導(dǎo)致過(guò)渡動(dòng)畫(huà)不產(chǎn)生效果，而且看起來(lái)不流暢，顯得生硬。

中間圓形顯示部分底圖四周是遮罩的效果，div hover之后圓形逐漸擴(kuò)大的過(guò)渡動(dòng)畫(huà)，顯示完整的底圖。如下所示的效果圖：
關(guān)于不定高度的元素實(shí)現(xiàn)transition動(dòng)畫(huà)，可以用max-height，文本內(nèi)容設(shè)置max-height: 64px; transition: max-height 1s;文本內(nèi)容的div hover之后設(shè)置max-height: 250px（例如250px），就可以實(shí)現(xiàn)這個(gè)效果，不過(guò)在這里這個(gè)動(dòng)畫(huà)效果不是很理想。也可以通過(guò)js獲取div.text精確的高度，賦予div.txt一個(gè)明確的值，移出鼠標(biāo)之后，移除這個(gè)值。如下所示：
Css:
.divLi .txt{
Height: 640;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
Html:
<div class=”divLi”>
<a href="project_detail.html">
<div class="ic">
<img src="images/img102.png"/>
</div>
<div class="img">
<img src="images/img101.jpg" />
<div class="img-circle">
<span></span>
</div>
</div>
<div class="txt">
<div class="text">
<div class="t1">
Joint project of Planting Grass in the Gobi Desert
</div>
<div class="t2">
Immunity, the best doctor of human health, is the ability of the human body to resist external...
</div>
</div>
</div>
</a>
</div>
Js:
<script>
$( '.divLi').hover(function() {
var hei = $(this).find(".text").height();
$(this).children(".txt").css('height', hei);
},function() {
$(this).children(".txt").removeAttr("style");
});
</script>
關(guān)于上圖的中間圓形顯示部分底圖四周遮罩，先設(shè)置定位在圖片上面，中間的圓形可以用border做，設(shè)置border-color做遮罩色，border-width設(shè)置大一些，再border-radius設(shè)置50%就能做成一個(gè)中間是圓形顯示部分底圖的遮罩，divhover 之后設(shè)置縮放的倍數(shù)，例如transform: scale(4)，加上div原先設(shè)置的過(guò)渡動(dòng)畫(huà)transition，就能把圓形顯示四周遮罩放大，中間的圓形就會(huì)放大，可以顯示全部的底圖，如下所示：
Html：
<div class="img-circle">
<span></span>
</div>
Css:
.divLi.img-circle{
position: absolute;
z-index: 3;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-transform: scale(1);
transform: scale(1);
}
.divLi:hover .img-circle{
-webkit-transform: scale(4);
transform: scale(4);
}
.divLi.img-circle span{
position: absolute;
top: 50%;
left: 50%;
width: 55%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.divLi .img-circle span::before {
content: "";
display: block;
padding-top: 100%;
}
.divLi.img-circle span:after{
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
border: 1000px solid #edf6ff;
border-radius: 50%;
-webkit-transform: translate(-50%, -50%);

標(biāo)題名稱：網(wǎng)站前端制作-不定高度的元素實(shí)現(xiàn)transition動(dòng)畫(huà)
網(wǎng)頁(yè)網(wǎng)址：http://www.jbt999.com/news22/240122.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站、App開(kāi)發(fā)、ChatGPT、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、微信公眾號(hào)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)