Question

我想知道如何修复CSS动画的位置。在下面的图片中，我想使文本居中于右侧。但是，它一直下降到底部。我想知道如何解决这个问题。

编辑：我已经添加了其余的HTML，在“我是”之后，我正在使用Javascript来使打字动画。

谢谢！

CSS

#intro {
font-family: 'Mukta', sans-serif;
font-weight: 800;
font-size: 34px;
line-height: 36px;
margin-top: 10%;
float: left;
animation-name: fade-in-from-top;
animation-duration: 2s;
}

@keyframes fade-in-from-top {
from { opacity: 0; margin-top: -30%; }
to { opacity: 1; }
}

HTML

<html>

<head>
    <title>Irene Li</title>
    <style type="text/css">a {text-decoration: none}</style>
    <link rel="icon" href="assets/images/icon.png">
    <link rel="stylesheet" type="text/css" href="./assets/css/style_copy.css">
    <link href="https://fonts.googleapis.com/css?family=Noto+Serif" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Mukta" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <script src="assets/script/animate.js"></script>
    <script src="assets/script/script.js"></script>

</head>

<body>
    <div class="page-wrapper">
        <div class="home-page-wrapper">
            <div id="navbar">
                <a href="index.html" class="navbar-item" id="current-navbar-item" style="margin-left": 50px">Irene Li</a>
                <a href="work.html" class="navbar-item" id="work-navbar-item" style="margin-right": 800px">Work</a>
                <a href="about.html" class="navbar-item" id="about-navbar-item" style="margin-right": 900px">About</a>
                <a href="assets/img/Li_Irene_Resume.pdf" class="navbar-item" id="resume-navbar-item" style="margin-right": 1000px>Resume</a>
            </div>
            <div id="container">
            <div id="intro">
            Hi! I'm Irene, <br>
            And I Am A <div class="typewrite" data-period="2000" data-type='[ "Design Student" ]'>
                <span class="wrap"></span>
            </div>
        </div>
    </div>
</body>

Answer 1

要使文本居中放置，最好的选择是在任何父容器上使用flexbox。见下文。

关于更改菜单链接的顺序，您需要为此撰写单独的SO帖子。您想要发布菜单代码和/或共享正在使用的平台。

#container {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#intro {
font-family: 'Mukta', sans-serif;
font-weight: 800;
font-size: 34px;
line-height: 36px;
margin-top: 10%;
float: left;
animation-name: fade-in-from-top;
animation-duration: 2s;
}

@keyframes fade-in-from-top {
from { opacity: 0; margin-top: -30%; }
to { opacity: 1; }
}

<div id="container">
<div id="intro">
Hi! I'm Irene, <br>
And I Am A <div class="typewrite" data-period="2000" data-type='[ 
"Design Student" ]'>
     <span class="wrap"></span>
</div>
</div>

如何修复CSS动画定位

1 个答案: