CSS过渡使左侧边框消失
CSS过渡使左侧边框消失
提问于 2018-06-15 07:17:54
我已经建立了一个用于练习的登录页面，其中有一个h1 +一个段落幻灯片，一个“阅读更多”按钮慢慢地出现。我还对其进行了设置，当您将鼠标悬停在“阅读更多”按钮上时，它会在y轴上旋转180度。然而，我的问题是当我将鼠标悬停在上面时，左边的边框就消失了。这是发生这种情况时的样子：
文本被翻转是因为我在Y轴上旋转了它，但是左边(嗯，实际上是右边，因为它翻转了)边框消失了。你知道为什么吗？
下面是我的代码：
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;}
}<!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>
我刚接触网页设计，所以解决方案可能是显而易见的。然而，我就是不明白为什么会发生这样的事情。请帮帮我！
谢谢,
Lyfe
回答 1
Stack Overflow用户
发布于 2018-06-15 08:35:50
下面的代码阻止边框消失：
.btn {
width: 150px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50867182
复制相关文章
相似问题