英文:
Animation in CSS for logo that goes from bottom to top
问题
以下是您要翻译的部分：
"Hi i try to get animation on my index.html with my style.css but it does not work and i dont understood why.
Here's my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=chrome">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/style.css">
<title>Arrow</title>
</head>
<body>
<span><span><img src="img/Arrow_logo.png"></span></span>
<div class="affiche">
<img src="img/arrow-season-5-poster.jpg" width="34%">
</div>
<div class="navigation">
<button><a href="pages/page2.html">Flash</a></button>
</div>
</body>
</html>
body {
background: #333;
}
.affiche {
background-color: #333;
color: #fff;
text-align: center;
}
.navigation {
background-color: #333;
color: #666;
text-align: center;
}
@keyframes spanFadeIn {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0%);
}
}
span {
overflow: hidden;
display: block;
span {
display: block;
animation: spanFadeIn 500ms ease-in-out;
}
}
I tried in sass but it broke everything in my html."
英文:
Hi i try to get animation on my index.html with my style.css but it does not work and i dont understood why.
Here's my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=chrome">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/style.css">
<title>Arrow</title>
</head>
<body>
<span><span><img src="img/Arrow_logo.png"></span></span>
<div class="affiche">
<img src="img/arrow-season-5-poster.jpg" width="34%">
</div>
<div class="navigation">
<button><a href="pages/page2.html">Flash</a></button>
</div>
</body>
</html>
body {
background: #333;
}
.affiche {
background-color: #333;
color: #fff;
text-align: center;
}
.navigation {
background-color: #333;
color: #666;
text-align: center;
}
@keyframes spanFadeIn {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0%);
}
}
span {
overflow: hidden;
display: block;
span {
display: block;
animation: spanFadeIn 500ms ease-in-out;
}
}
I tried in sass but it broke everything in my html.
答案1
得分: 0
你的CSS文件中使用了SASS代码（这是不正确的），而不是嵌套 spans，请使用以下标记：
body {
background: #333;
}
.affiche {
background-color: #333;
color: #fff;
text-align: center;
}
.navigation {
background-color: #333;
color: #666;
text-align: center;
}
@keyframes spanFadeIn {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0%);
}
}
span {
overflow: hidden;
display: block;
}
span span {
display: block;
animation: spanFadeIn 500ms ease-in-out;
}
英文:
You are using SASS code in CSS file (which is incorrect), instead of nesting spans use the notation below:
body {
background: #333;
}
.affiche {
background-color: #333;
color: #fff;
text-align: center;
}
.navigation {
background-color: #333;
color: #666;
text-align: center;
}
@keyframes spanFadeIn {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0%);
}
}
span {
overflow: hidden;
display: block;
}
span span {
display: block;
animation: spanFadeIn 500ms ease-in-out;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论