文字在动画之后移动

Question

我有一个 div，其中包含一个 h2 和一个 p。我有不透明度的过渡。当我们悬停在上面时，它的不透明度从 0 变为 1。问题是，当我悬停在那里时，会发生过渡，但在那之后，h2 和 p 的最后一行会向上移动一些像素。我不知道如何解决这个问题。请尽量不要使用 JS。谢谢！

CSS:

*, *::after, *::before{
    margin: 0px;
    padding: 0px;
}

.container{
    display: flex;
    justify-content: center;
    background-color: white;
}

.card{
    background-color: black;
    position: relative;
    margin: 1rem;
    overflow: hidden;
    border-radius: 50%;
    transition:
        scale 300ms ease-out, 
        transform 400ms ease-out, 
        border-radius 300ms ease-out;
}

.card::before{
    content: "";
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    position: absolute;
    z-index: 1;
    top: 1rem;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    transform: scale(0, 1);
    transition: transform 300ms ease-out;
}

.card::after{
    content: "";
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    position: absolute;
    z-index: 1;
    top: 1rem;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    transform: scale(1, 0);
    transition: transform 300ms ease-out;
}

.card-img{
    opacity: 2;
    max-width: 100%;
    display: block;
    transition: opacity 300ms ease-out;
}

.card-content{
    z-index: 2;
    position: absolute;
    top: 50%;
    color: white;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 300ms ease-out 100ms;
}

.card-title{
    margin: 0.5rem;
}

.card-body{
    margin: 0.5rem;
}

.card:hover .card-content{
    opacity: 0.8;
}

.card:hover .card-img{
    opacity: 0.5;
}

.card:hover::before{
    transform: scale(1.05, 1);
}

.card:hover::after{
    transform: scale(1, 1.05);
}

.card:hover{
    transform: scale(1.1);
    border-radius: 23px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Card</title>
</head>
<body>
    <div class="container">
        <div class="card">
            <img src="img/1.jpg" alt="1" class="card-img">
            <div class="card-content">
                <h2 class="card-title">Something to Code</h2>
                <p class="card-body">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus, architecto. Lorem ipsum dolor sit amet consectetur.</p>
            </div>
        </div>
        <div class="card">
            <img src="img/2.jpg" alt="1" class="card-img">
            <div class="card-content">
                <h2 class="card-title">Something to Code</h2>
                <p class="card-body">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus, architecto. Lorem ipsum dolor sit amet consectetur.</p>
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

这里的主要问题是.card:hover{ transform: scale(1.1); } 这会导致卡片内容变大并重新呈现，有时会导致文本跳转。

添加

-webkit-backface-visibility: hidden;
-moz-backface-visibility:    hidden;
-ms-backface-visibility:     hidden;

到 .card-content 将解决这种情况下的问题

*, *::after, *::before{
    margin: 0px;
    padding: 0px;
}

.container{
    display: flex;
    justify-content: center;
    background-color: white;
}

.card{
    background-color: black;
    position: relative;
    margin: 1rem;
    overflow: hidden;
    border-radius: 50%;
    transition:
        scale 300ms ease-out, 
        transform 400ms ease-out, 
        border-radius 300ms ease-out;
}

.card::before{
    content: "";
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    position: absolute;
    z-index: 1;
    top: 1rem;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    transform: scale(0, 1);
    transition: transform 300ms ease-out;
}

.card::after{
    content: "";
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    position: absolute;
    z-index: 1;
    top: 1rem;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    transform: scale(1, 0);
    transition: transform 300ms ease-out;
}

.card-img{
    opacity: 2;
    max-width: 100%;
    display: block;
    transition: opacity 300ms ease-out;
}

.card-content{
    z-index: 2;
    position: absolute;
    top: 50%;
    color: white;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 300ms ease-out 100ms;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
}

.card-title{
    margin: 0.5rem;
}

.card-body{
    margin: 0.5rem;
}

.card:hover .card-content{
    opacity: 0.8;
}

.card:hover .card-img{
    opacity: 0.5;
}

.card:hover::before{
    transform: scale(1.05, 1);
}

.card:hover::after{
    transform: scale(1, 1.05);
}

.card:hover{
    transform: scale(1.1);
    border-radius: 23px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Card</title>
</head>
<body>
    <div class="container">
        <div class="card">
            <img src="https://via.placeholder.com/600x600" alt="1" class="card-img">
            <div class="card-content">
                <h2 class="card-title">Something to Code</h2>
                <p class="card-body">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus, architecto. Lorem ipsum dolor sit amet consectetur.</p>
            </div>
        </div>
        <div class="card">
            <img src="https://via.placeholder.com/600x600" alt="1" class="card-img">
            <div class="card-content">
                <h2 class="card-title">Something to Code</h2>
                <p class="card-body">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus, architecto. Lorem ipsum dolor sit amet consectetur.</p>
            </div>
        </div>
    </div>
</body>
</html>

文字在动画之后移动

Text moving after the animation

html

css

transform

opacity

css-transitions