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

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

中間圓形顯示部分底圖四周是遮罩的效果，div hover之后圓形逐漸擴大的過渡動畫，顯示完整的底圖。如下所示的效果圖：
關于不定高度的元素實現(xiàn)transition動畫，可以用max-height，文本內容設置max-height: 64px; transition: max-height 1s;文本內容的div hover之后設置max-height: 250px（例如250px），就可以實現(xiàn)這個效果，不過在這里這個動畫效果不是很理想。也可以通過js獲取div.text精確的高度，賦予div.txt一個明確的值，移出鼠標之后，移除這個值。如下所示：
Css:
.divLi .txt{
Height: 640;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
Html:

Js:

關于上圖的中間圓形顯示部分底圖四周遮罩，先設置定位在圖片上面，中間的圓形可以用border做，設置border-color做遮罩色，border-width設置大一些，再border-radius設置50%就能做成一個中間是圓形顯示部分底圖的遮罩，divhover 之后設置縮放的倍數(shù)，例如transform: scale(4)，加上div原先設置的過渡動畫transition，就能把圓形顯示四周遮罩放大，中間的圓形就會放大，可以顯示全部的底圖，如下所示：
Html：

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%);

本文名稱：網(wǎng)站前端制作-不定高度的元素實現(xiàn)transition動畫
標題來源：http://muchs.cn/news/240122.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供面包屑導航、定制開發(fā)、移動網(wǎng)站建設、網(wǎng)站維護、小程序開發(fā)、響應式網(wǎng)站

廣告

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