html - 无法居中 CSS
问题描述
我正在尝试跟随视频创建一个完整的网站项目。目前正在尝试将动画添加到一个标题中,该标题分为三个和全部在 . 无论出于何种原因,当涉及到用背景覆盖标题和应用动画时,我无法复制他在视频中所做的事情。当我编写相同的代码时,标题并没有被完全阻止,我的动画与视频中的不一样。
应该以正确的方式覆盖标题应该是什么样子
我编码时的样子:在此处输入图像描述
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@200&display=swap');
* {
Padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
color: white;
font-family: 'IBM Plex Serif', serif;
}
a {
text-decoration: none;
}
body {
background: rgb(123, 127, 153);
}
.container {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
/* Hero Section */
#hero {
background-image: url(./img/galaxy.jpeg);
background-size: cover;
background-position: top center;
position: relative;
z-index: 1;
}
#hero::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: blue;
opacity: .2;
z-index: -1;
}
#hero h1 {
display: block;
width: fit-content;
font-size: 4rem;
position: relative;
color: white;
}
#hero span {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: red;
animation: text_reveal_box 1s ease;
}
#hero .cta {
display: inline-block;
padding: 10px 30px;
position: relative;
left: 55px;
align-items: center;
color: red;
background-color: transparent;
border: 2px solid red;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: .1rem;
margin-top: 30px;
transition: .3s ease;
transition-property: background-color, color;
}
#hero .cta:hover {
color: white;
background-color: red;
}
/* End Hero Section */
/*keyframes*/
@keyframes text_reveal_box {
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>FullSite</title>
<meta charset="UTF-8">
</head>
<body>
<!-- Start Hero Section -->
<section id="hero">
<div class="hero container">
<div>
<h1><span>Hello...</span></h1>
<h1><span>We are</span></h1>
<h1><span>J.P.Astronomics</span></h1>
<a href="#" type="button" class="cta">Portfolio</a>
</div>
</div>
</section>
<!-- End Hero Section -->
<!-- Start Astronomical Goals-->
<section id="service">
<div class="service container">
<div class="serivce-top">
<h1 class="section-title">Astronomical Goals</h1>
</div>
</div>
</section>
<!--End Astronomical Goals-->
</body>
</html>
解决方案
您必须删除以下 css 和 ass 一些样式才能实现设计
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@200&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
color: white;
font-family: "IBM Plex Serif", serif;
}
a {
text-decoration: none;
}
body {
background: rgb(123, 127, 153);
}
.container {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
/* Hero Section */
#hero {
background-image: url(./img/galaxy.jpeg);
background-size: cover;
background-position: top center;
position: relative;
z-index: 1;
}
#hero::after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: blue;
opacity: 0.2;
z-index: -1;
}
#hero h1 {
font-size: 4rem;
position: relative;
color: white;
}
.content-wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
}
#hero span {
background-color: red;
color: red;
animation: text_reveal_box 1s ease;
}
#hero .cta {
display: inline-block;
padding: 10px 30px;
position: relative;
align-items: center;
color: red;
background-color: transparent;
border: 2px solid red;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: 0.1rem;
margin-top: 30px;
transition: 0.3s ease;
transition-property: background-color, color;
}
#hero .cta:hover {
color: white;
background-color: red;
}
/* End Hero Section */
/*keyframes*/
@keyframes text_reveal_box {
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
<section id="hero">
<div class="hero container">
<div class="heading-wrapper">
<h1><span>Hello...</span></h1>
<h1><span>J.P.Astronomics</span></h1>
<h1><span>We are</span></h1>
<a href="#" type="button" class="cta">Portfolio</a>
</div>
</div>
</section>
<!-- End Hero Section -->
<!-- Start Astronomical Goals-->
<section id="service">
<div class="service container">
<div class="serivce-top">
<h1 class="section-title">Astronomical Goals</h1>
</div>
</div>
</section>
推荐阅读
- python - Pandas Dataframe Python:代码错误修复和简化 - 如果 Location='Y',商店类别级别的空间减少 50%
- sql - Oracle HR 模式中的 SQL
- groovy - groovy中最小调用中的比较器与闭包?
- amazon-web-services - 从 AWS Lambda 函数中删除 zip 文件
- python - 更新的 pandas 显示旧版本并在使用爆炸功能时引发属性错误
- python - 按日期加密密码实验
- javascript - axios 无法获取响应数据
- image-processing - 想不出解决这个图像分割问题
- c - 如何在具有 Web 扩展原生消息传递 API 的原生 C 应用程序中使用`stdin`?
- swift - 如何删除上一个单元格的 UITableViewCell 分隔符?