我正在尝试对从底部页面到顶部的部分内的段落进行动画处理，但它不起作用。
如何解决这个问题？
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 p”样式。
底部值必须包含“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>关于html - 部分不从页面下移至顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69426991/