Question

我已经为练习设置了一个目标网页，其中h1 +一个段落滑入，以及＆＃34;阅读更多＆＃34;按钮慢慢出现。我也将它设置为当你将鼠标悬停在＆＃34; Read More＆＃34;按钮，它在y轴上旋转180度。但是，我的问题是当我将鼠标悬停在左边时，左边框会消失。这就是发生这种情况时的样子：

翻转文本是因为我在Y轴上旋转了它，但是左边（好吧，实际上是正确的，因为它被翻转）边框消失了。关于为什么的任何想法？
这是我的代码：

＆＃13;

body {
        margin: 0;
        padding: 0;
        font-family: Arial, Helvetica, sans-serif;
        background-color: #12475f;
        color: white;
        line-height: 1.6;
        text-align: center;
    }
    
    .container {
        max-width: 960px;
        margin: auto;
        padding: 0 30px;
    }
    
    #showcase {
        height: 300px;
    }
    
    #showcase h1 {
        font-size: 50px;
        line-height: 1.3;
        position: relative;
        animation-name: heading;
        animation-duration: 3s;
        animation-fill-mode: forwards;
    }
    
    @keyframes heading {
        0% {top: -50px;}
        100% {top: 200px}
    }
    
    #content {
        position: relative;
        animation-name: content;
        animation-duration: 3s;
        animation-fill-mode: forwards;
    }
    
    @keyframes content {
        0% {right: 100%;}
        100% {right: 0;}
    }
    
    .btn {
        display: inline-block;
        text-decoration: none;
        padding: 1rem 2rem;
        border: white 1px solid;
        margin-top: 40px;
        color: white;
        opacity: 0;
        animation-name: btn;
        animation-duration: 3s;
        animation-delay: 3s;
        animation-fill-mode: forwards;
        transition-property: transform;
        transition-duration: 1s;
    }
    
    .btn:hover {
        transform: rotateY(180deg);
    }
    
    @keyframes btn {
        0% {opacity: 0;}
        100% {opacity: 1;}
    }

＆＃13;

<!DOCTYPE html>
    <html lang="en">
        <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" type="text/css" href="landing.css">
        <title>Landing Page</title>
    </head>
    
    <body>
        <header id="showcase">
            <h1>Welcome To My Site</h1>
        </header>
        <div id="content" class="container">
            <p>(pause) You thought wrong, dude. (He shoots and Marty falls to the ground.) (Tannen laughs and walks over to where Marty lays motionless on the ground. Doc watches Tannen then looks down at Marty in disbelief.) Ahh, thank ya. (Tannen stops just in front of Marty. He points his gun down at Marty meaning to finish him off. Suddenly Marty kicks the gun out of Tannen's hand. He stands up to face Tannen. Tannen throws a punch and nearly breaks his hand. Marty lifts his poncho to reveal the stove door that he put on as a bullet-proof vest. He saw the same thing in the Clint Eastwood movie that Biff was watching in the other 1985 time line.</p>
        </div>
        <a href="#" class="btn">Read More</a>
    </body>
    </html>

＆＃13;

我是网页设计的新手，所以解决方案可能很明显。但是，我无法弄清楚为什么会这样。请帮忙！
谢谢，
LYFE

Answer 1

我认为“悬停”时出现的问题是班级btn的css行：

    .btn { 
        padding: 1rem 2rem; 
    }

我还注意到，在https://codepen.io中对其进行测试之前，您的代码片段似乎没问题。您所指的 border-left 似乎是 border-bottom 给我们。

我在您的代码之前做了一些更改：

您可以访问此pen并播放代码。

body {
        margin: 0;
        padding: 0;
        font-family: Arial, Helvetica, sans-serif;
        background-color: #12475f;
        color: white;
        line-height: 1.6;
        text-align: center;
    }
    
    .container {
        max-width: 960px;
        margin: auto;
        padding: 0 30px;
    }
    
    #showcase {
        height: 300px;
    }
    
    #showcase h1 {
        font-size: 50px;
        line-height: 1.3;
        position: relative;
        animation-name: heading;
        animation-duration: 3s;
        animation-fill-mode: forwards;
    }
    
    @keyframes heading {
        0% {top: -50px;}
        100% {top: 200px}
    }
    
    #content {
        position: relative;
        animation-name: content;
        animation-duration: 3s;
        animation-fill-mode: forwards;
    }
    
    @keyframes content {
        0% {right: 100%;}
        100% {right: 0;}
    }

    span {
        padding: 1rem 2rem;
    }

    .btn {
        width: auto;
        height: 60px;
        line-height: 60px;
        display: inline-block;
        text-decoration: none;
        /* padding: 1rem 2rem; */            
        border: white 1px solid;
        margin-top: 40px;
        color: white;
        opacity: 0;
        animation-name: btn;
        animation-duration: 3s;
        animation-delay: 3s;
        animation-fill-mode: forwards;
        transition-property: transform;
        transition-duration: 1s;
    }
    
    .btn:hover {
        transform: rotateY(180deg);
    }
    
    @keyframes btn {
        0% {opacity: 0;}
        100% {opacity: 1;}
    }

<!DOCTYPE html>
    <html lang="en">
        <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" type="text/css" href="landing.css">
        <title>Landing Page</title>
    </head>
    
    <body>
        <header id="showcase">
            <h1>Welcome To My Site</h1>
        </header>
        <div id="content" class="container">
            <p>(pause) You thought wrong, dude. (He shoots and Marty falls to the ground.) (Tannen laughs and walks over to where Marty lays motionless on the ground. Doc watches Tannen then looks down at Marty in disbelief.) Ahh, thank ya. (Tannen stops just in front of Marty. He points his gun down at Marty meaning to finish him off. Suddenly Marty kicks the gun out of Tannen's hand. He stands up to face Tannen. Tannen throws a punch and nearly breaks his hand. Marty lifts his poncho to reveal the stove door that he put on as a bullet-proof vest. He saw the same thing in the Clint Eastwood movie that Biff was watching in the other 1985 time line.</p>
        </div>
        <a href="#" class="btn">
           <span>Read More</span>
        </a>
    </body>
    </html>

Answer 2

以下代码会阻止边框消失：

.btn {
    width: 150px;
}

CSS过渡使左边界消失

2 个答案: