gpt4 book ai didi

html - CSS 过渡使左边框消失

转载 作者:太空宇宙 更新时间:2023-11-04 01:12:53 26 4
gpt4 key购买 nike


我设置了一个登陆页面用于练习,其中一个h1 + 一个段落滑入,然后慢慢出现一个“阅读更多”按钮。我还对其进行了设置,以便当您将鼠标悬停在“阅读更多”按钮上时,它会在 y 轴上旋转 180 度。但是,我的问题是当我悬停时左边框消失了。这是发生这种情况时的样子:
enter image description here
文本被翻转是因为我在 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>

我是网页设计的新手,所以解决方案可能很明显。但是,我就是不明白为什么会这样。请帮助!
谢谢,
生活

最佳答案

我认为“悬停”时出现的问题是 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>

关于html - CSS 过渡使左边框消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50867182/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com