Section没有从页面的底部移动到顶部

我正在尝试将section内的段落从底部页面移动到顶部，但是它不起作用。

如何解决这个问题?

body {
background: rgb(196, 56, 56);
height: 100%;
width: 100%;
}
section {
position: relative;
}
section p {
color: rgb(235, 197, 31);
animation: 1s slid;
}
@keyframes slid {
0% {
bottom: -100;
opacity: 0;
}
100% {
bottom: 0;
opacity: 1;
}
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="test.css" />
<title>Document</title>
</head>
<body>
<section>
<p>I'm YASER</p>
</section>
</body>
</html>

请添加"position: absolute;span "风格。

底部值必须包含"px"

body {
background: rgb(196, 56, 56);
height: 100%;
width: 100%;
}
section {
position: relative;
}
section p {
position: absolute;
color: rgb(235, 197, 31);
animation: 1s slid;
}
@keyframes slid {
0% {
bottom: -100px;
opacity: 0;
}
100% {
bottom: 0;
opacity: 1;
}
}

<body>
<section>
<p>I'm YASER</p>
</section>
</body>

Try withtransform:

body {
background: rgb(196, 56, 56);
height: 100%;
width: 100%;
}
section {
position: relative;
}
section p {
color: rgb(235, 197, 31);
animation: 1s slid;
}
@keyframes slid {
0% {
transform: translateY(-100px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="test.css" />
<title>Document</title>
</head>
<body>
<section>
<p>I'm YASER</p>
</section>
</body>
</html>

相关内容

最新更新

热门标签：