时间戳

首页 > 解决方案 > 上下动画

html - 上下动画

问题描述

我正在制作即将推出的网页，但问题是动画无法正常工作。我该如何解决？HTML代码-

<head>
    <title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="file:///Users/privacy/Desktop/coomming%20soon/comingsoon.css">
</head>

<body>
<div id="topline">
    <h4> Our new site is </h4>
    <a class="c">COOMING SOON</a>
</div>
<p class="h">hi</p>


</body>

</html>

CSS代码-

       background-size: cover;
       background-position: center;
       background-repeat: no-repeat;
       background-attachment: fixed;
    }

html {text-align: center;}

#topline {margin-top: 8%;
          color: white;
          font-size: 35;
      }
.c{animation-duration: 4s;
   animation-delay: 1s;
   animation-name: cos;
   animation-iteration-count: 2;
   color: #66ccff; 
   font-size: 80px;
    }

@keyframes cos {
    0% {color: #66ccff; left: 0px;}
    25%{color: #ff33cc; left: -800px;}
    75%{color: #3333ff; left: 800px;}
    100%{color:#66ccff; left: 0px;}
}

@keyframes h {
    from{top: 0px;}
    to{top: 80px;}
} 

.h {animation-name: h;
    animation-iteration-count: 3;
    position: relative;
    color: blueviolet;

}

好吧，href 是隐私，因为我没有吃过它。忽略标题。我是学习者，所以可能有一些拼写错误，但我已经检查了浏览器控制台。谢谢。

标签： htmlcss

解决方案

上面的代码中你还没有添加animation-duration。而且你在动画代码之前使用了关键帧。这里是答案

    body {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
    
    html {
        text-align: center;
    }
    
    #topline {
        margin-top: 8%;
        color: white;
        font-size: 35;
    }
    
    .c {position:relative;
        animation-duration: 4s;
        animation-delay: 1s;
        animation-name: cos;
        animation-iteration-count: 2;
        color: #66ccff;
        font-size: 80px;
    }
    
    @keyframes cos {
        0% {
            color: #66ccff;
            left: 0px;
        }
        25% {
            color: #ff33cc;
            left: -800px;
        }
        75% {
            color: #3333ff;
            left: 800px;
        }
        100% {
            color: #66ccff;
            left: 0px;
        }
    }
    
    .h {
        animation-name: h;
        animation-iteration-count: 3;
        animation-duration: 3s;
        position: relative;
        color: blueviolet;
    }
    
    @keyframes h {
        from {
            top: 0px;
        }
        to {
            top: 80px;
        }
    }
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="file:///Users/privacy/Desktop/coomming%20soon/comingsoon.css">
</head>


<body>
    <div id="topline">
        <h4> Our new site is </h4>
        <a class="c">COOMING SOON</a>
    </div>
    <p class="h">hi</p>


</body>

</html>

推荐阅读