Css 从屏幕外下拉？_Css - Fatal编程技术网

Css 从屏幕外下拉？

css

Css 从屏幕外下拉？,css,Css,我有一个动画应用到我的形式，我希望它从屏幕顶部下降，因为它淡入我有淡入属性集，它就像一个魅力，但现在我需要它从顶部滑入。我还需要先显示我的表。我想让它突然出现。我该怎么做这是我的CSS表格： @keyframes fadeIn{ from {opacity: 0;} to {opacity: 1;} } form { margin-bottom: 1em; animation-name: fadeIn; animation-duration: 2s;}

我有一个动画应用到我的形式，我希望它从屏幕顶部下降，因为它淡入

我有淡入属性集，它就像一个魅力，但现在我需要它从顶部滑入。我还需要先显示我的表。我想让它突然出现。我该怎么做

这是我的CSS表格：

@keyframes fadeIn{
    from {opacity: 0;}
    to {opacity: 1;}
}


form {
  margin-bottom: 1em;
    animation-name: fadeIn;
    animation-duration: 2s;}

这是我的表格CSS：

table{
    border-bottom: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    width: 330px;
    white-space: 5px;}


table {border-collapse: collapse;}

tr:nth-of-type(odd) {
    background-color: #aaa;
}

tr:nth-of-type(even) {
    background-color: #ccc;}



table caption{
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-left:1px solid black;
    background-color: #999;
    color: black;
    font-weight: bold;
    font-variant: small-caps;}

这方面的任何帮助都会很好！再次感谢

以下是我所有的HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <link href='https://fonts.googleapis.com/css?family=Oregano' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/project4.css" type="text/css">
<title>SylviaGunter WEB-210 Project 4</title>
</head>

<body>

<form action="process.php">
<h1>Registration</h1>
<ol>
    <li>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
    </li>
    <li>
        <label for="email">Email:</label>
        <input class="required" type="text" id="email" name="email">
    </li>
    <li>
        <label for="pass">Password:</label>
        <input  class="required" type="password" id="pass" name="pass">
    </li>
    <li>
        <input type="submit" value="Register">
    </li>
</ol>
</form>

<table>
<caption>Last five new registrants</caption>
    <tr>
        <th>Name</th>
        <th>Date Joined</th>
    </tr>
    <tr>
        <td>Aaron Aaronson</td>
        <td>1/1/14</td>
    </tr>
    <tr>
        <td>Becky Beckinson</td>
        <td>1/1/14</td>
    </tr>
    <tr>
        <td>Charlie Charleson</td>
        <td>1/1/14</td>
    </tr>   
    <tr>
        <td>Devon Devons</td>
        <td>1/1/14</td>
    </tr>   
    <tr>
        <td>Edward Edwards</td>
        <td>1/1/14</td>
    </tr>
</table>
</body>
</html>


西尔维亚冈特WEB-210项目4
登记

姓名：


电邮：


密码：



最后五名新登记者
名称
加入日期
亚伦·阿伦森
1/1/14
贝基·贝金森
1/1/14
查理·查尔森
1/1/14
德文郡
1/1/14
爱德华·爱德华兹
1/1/14

已编辑我想这就是你需要的

  @keyframes fadeIn{
     from {opacity: 0; top: -400px;}
     to {opacity: 1; top: 0;}
  }
  form {
      position: relative;
  }

这里是经过编辑的小提琴：

您好，因为您想创建下拉效果，所以在动画中，您首先需要给出从哪个位置开始和结束，我认为这两个参数将满足您的需要，请检查

所以你可以通过

@关键帧fadeIn{
从{opacity:0；top:0；}
到{不透明度：1；顶部：100%；}
}

您能用您的工作示例创建一个jsfiddle.com吗？很难理解你在说什么need@Sylvia585请提供html代码或JSFIDLE演示当我键入此内容时，它会完全带走我的动画。@Sylvia585请提供您的html代码，如果您不提供一个可用的提琴，将无法为您提供帮助。请看帖子里的评论，我不知道怎么做。我甚至不知道小提琴是什么！我是这方面的新手。为什么你不能只看代码？是否有一个“出现”关键帧使我的桌子出现？我可以使用多个不同名称的（关键帧）吗？只需输入jsfiddle.com并填写css和html即可。你为我们提供了一个这样的例子。很难说怎么做。最好的方法是绝对定位，正如我在示例中所说的那样。通过绝对定位，您可以控制元素的顶部和左侧，并使其在整个屏幕上移动。好了，我想这是对的。现在你可以看到了。。。我需要表格从顶部滑入。。。那张桌子需要突然出现（首先）并保持在那里。