中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

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

2023-02-27    分類: 網(wǎng)站建設(shè)

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

前端效果

中間圓形顯示部分底圖四周是遮罩的效果,div hover之后圓形逐漸擴大的過渡動畫,顯示完整的底圖。如下所示的效果圖:
關(guān)于不定高度的元素實現(xiàn)transition動畫,可以用max-height,文本內(nèi)容設(shè)置max-height: 64px; transition: max-height 1s;文本內(nèi)容的div hover之后設(shè)置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:
<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%就能做成一個中間是圓形顯示部分底圖的遮罩,divhover 之后設(shè)置縮放的倍數(shù),例如transform: scale(4),加上div原先設(shè)置的過渡動畫transition,就能把圓形顯示四周遮罩放大,中間的圓形就會放大,可以顯示全部的底圖,如下所示:
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%);
transform: translate(-50%, -50%);

標題名稱:網(wǎng)站前端制作-不定高度的元素實現(xiàn)transition動畫
網(wǎng)頁網(wǎng)址:http://m.rwnh.cn/news22/240122.html

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

廣告

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

綿陽服務(wù)器托管
全椒县| 武隆县| 邛崃市| 潞城市| 大渡口区| 宁武县| 禄劝| 玉门市| 德惠市| 关岭| 虎林市| 漾濞| 滦南县| 衢州市| 茶陵县| 海宁市| 莎车县| 永济市| 沁水县| 炎陵县| 霍邱县| 瑞丽市| 新竹县| 历史| 内丘县| 曲阳县| 汉沽区| 保德县| 常德市| 遂昌县| 南涧| 石棉县| 汝州市| 大洼县| 双桥区| 巴中市| 满洲里市| 巴彦县| 雷州市| 龙江县| 临江市|