CSS動(dòng)畫(huà)可以讓網(wǎng)頁(yè)更加生動(dòng)有趣，但如果元素的寬高是未知的，該怎么使用CSS動(dòng)畫(huà)呢？

在實(shí)現(xiàn)CSS動(dòng)畫(huà)的過(guò)程中，我們通常需要確定元素的寬高，這樣才可以針對(duì)具體的尺寸進(jìn)行動(dòng)畫(huà)設(shè)計(jì)。但如果元素的寬高是未知的，我們?cè)撛趺崔k呢？下面我們將介紹一些應(yīng)對(duì)未知寬高的CSS動(dòng)畫(huà)技巧。

/* 例1：使用transform進(jìn)行動(dòng)畫(huà) */
.box {
position: relative;
}
.box::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-top: 100%; /* 設(shè)置padding來(lái)實(shí)現(xiàn)寬高比例 */
background-color: #f00;
transition: transform .5s ease;
}
.box:hover::before {
transform: scale(1.5);
}

在這個(gè)例子中，我們使用了偽元素來(lái)實(shí)現(xiàn)效果。由于是絕對(duì)定位的元素，所以不需要考慮寬高的問(wèn)題。在偽元素上設(shè)置寬高比例，然后使用transform進(jìn)行縮放，在:hover時(shí)執(zhí)行動(dòng)畫(huà)。這種技巧適用于元素的寬高比例是已知的情況。

/* 例2：使用偽元素?fù)伍_(kāi)父元素 */
.box {
position: relative;
}
.box::before {
content: "";
display: block;
padding-top: 100%; /* 設(shè)置padding來(lái)實(shí)現(xiàn)寬高比例 */
}
.content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #f00;
opacity: 0;
transition: opacity .5s ease;
}
.box:hover .content {
opacity: 1;
}

在這個(gè)例子中，我們使用了偽元素來(lái)?yè)伍_(kāi)box元素的高度。然后通過(guò)絕對(duì)定位的方式，將content元素定位到box元素的位置。由于content元素是絕對(duì)定位的，所以寬高也不需要考慮。使用opacity來(lái)實(shí)現(xiàn)漸變效果，并在:hover時(shí)觸發(fā)動(dòng)畫(huà)。

這些技巧只是針對(duì)未知寬高的一些解決方案，實(shí)際應(yīng)用中還需要根據(jù)具體情況進(jìn)行調(diào)整。但這些技巧可以為我們?cè)谑褂肅SS動(dòng)畫(huà)時(shí)提供一些啟示，讓我們能夠更加靈活地應(yīng)對(duì)不同的情況。