18910140161

HTML-我的CSS动画不工作,而其他一切都正常-堆栈溢出

顺晟科技

2022-10-19 14:08:36

22

我一直在编写我的一个网站,我遇到了一个非常烦人的问题!

我的404页的CSS动画不起作用。但是,除了动画之外,所有其他样式定义都工作得很好。这让我相信,我的CSS出了问题。如果你需要额外的代码,我愿意提供给你。我的网站使用Node.js和一个名为Express的框架来承载网站。同样,除了动画之外,CSS的其余部分都可以正常工作。下面是我的CSS的地狱:

还有我的HTML:

有人能帮帮我吗?


顺晟科技:

尝试使用以下命令: 我认为问题是你运行你的动画只有一秒钟,也只有一次。尝试使它的animation-iteration-count无限大。

@font-face {
    font-family: 'Consolas';
    src: url("/fonts/consolas.woff") format("woff");
};

/* @keyframes slidein {
    0% {margin-top:50px;opacity:0;filter:blur(5px);}
    100% {margin-top:60px;opacity:1;filter:blur(0px);}
}; */
@keyframes slidein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
}

* {
    padding: 0 auto;
    margin: 0 auto;
}

body {
    background-color: #232323;
    color:white;
    font-family: 'Consolas';
}

.content {
    margin: auto;
    text-align: center;
    width: 100%;
    height: 100%;
}

.t404 {
    margin-top:50px;
    opacity:0;
    filter:blur(5px);
    font-size: calc(50pt + 2vmin);
    color: #00bcd9;
    animation: 1s ease-out slidein;
    -webkit-animation: 1s ease-out slidein;
}
.t404text {
    color: white;
}

看不到您的关键帧定义,因为前面的定义后面有分号。

这里没有那个;

  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航