欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

縮放時(shí)如何禁用文本對(duì)齊？

CSS

我正在制作一個(gè)網(wǎng)站，在縮放時(shí)遇到了一些文字問題。

我用的是js觸發(fā)的CSS動(dòng)畫。

與下面圖片中的其他兩個(gè)元素不同，主文本的字體大小不隨其父文本縮放。經(jīng)過一些調(diào)試，我認(rèn)為這是因?yàn)槲谋咎螅瑹o法自動(dòng)縮放。

所以我決定單獨(dú)制作文本動(dòng)畫，然而，當(dāng)它被制作成動(dòng)畫時(shí)，你可以看到很多抖動(dòng)，我假設(shè)這是文本對(duì)齊，我如何使它在最初對(duì)齊后看起來完全一樣呢？本質(zhì)上，我希望文本保持原樣，并像div那樣縮放。

我能想到的唯一解決方案是用畫布制作一個(gè)圖像，但這似乎是一個(gè)非常落后和不恰當(dāng)?shù)慕鉀Q方案。

另外，如果可能的話，有沒有一種方法可以讓它像較小的文本一樣用父元素來激活自己？

這里有一個(gè)演示視頻:https://imgur.com/a/nFmG1AN

這里有一個(gè)演示:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="testin.css">
    <ba
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body class="body">
<div class="rect1">
    <p class="centerText">I am very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long</p>
</div>
</body>
</html>

CSS:

.rect1 {
    font-size: 140%;
    font-family: Verdana, serif;
    top: 300px;
    bottom: 845px;
    height: 450px;
    width: 340px;
    margin-left: 178px;
    background-color: rgba(53, 53, 53, 0.37);
    z-index: 2;
    position: absolute;
    animation: ctrTxtScale 0.75s 2s;
}

.centerText {
    padding: 10px;
}

@keyframes ctrTxtScale {
    from {
        font-size: 140%;
    }
    to {
        font-size: 100%;
    }
}

.body {
    background-color: aliceblue;
}