CSS中的标志从底部到顶部的动画

huangapple
go评论90阅读模式
英文:

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 :

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=chrome">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <link rel="stylesheet" href="styles/style.css">
  9.     <title>Arrow</title>
  10. </head>
  12. <body>
  13.     <span><span><img src="img/Arrow_logo.png"></span></span>
  15.     <div class="affiche">
  16.         <img src="img/arrow-season-5-poster.jpg" width="34%">
  17.     </div>
  19.     <div class="navigation">
  20.         <button><a href="pages/page2.html">Flash</a></button>
  21.     </div>
  22. </body>
  24. </html>
  1. body {
  2.     background: #333;
  3. }
  5. .affiche {
  6.     background-color: #333;
  7.     color: #fff;
  8.     text-align: center;
  9. }
  11. .navigation {
  12.     background-color: #333;
  13.     color: #666;
  14.     text-align: center;
  15. }
  17. @keyframes spanFadeIn {
  18.     0% {
  19.         transform: translateY(100%);
  20.     }
  22.     100% {
  23.         transform: translateY(0%);
  24.     }
  25. }
  27. span {
  28.     overflow: hidden;
  29.     display: block;
  31.     span {
  32.         display: block;
  33.         animation: spanFadeIn 500ms ease-in-out;
  34.     }
  35. }

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 :

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  4. &lt;head&gt;
  5.     &lt;meta charset=&quot;UTF-8&quot;&gt;
  6.     &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=chrome&quot;&gt;
  7.     &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  8.     &lt;link rel=&quot;stylesheet&quot; href=&quot;styles/style.css&quot;&gt;
  9.     &lt;title&gt;Arrow&lt;/title&gt;
  10. &lt;/head&gt;
  12. &lt;body&gt;
  13.     &lt;span&gt;&lt;span&gt;&lt;img src=&quot;img/Arrow_logo.png&quot;&gt;&lt;/span&gt;&lt;/span&gt;
  15.     &lt;div class=&quot;affiche&quot;&gt;
  16.         &lt;img src=&quot;img/arrow-season-5-poster.jpg&quot; width=&quot;34%&quot;&gt;
  17.     &lt;/div&gt;
  19.     &lt;div class=&quot;navigation&quot;&gt;
  20.         &lt;button&gt;&lt;a href=&quot;pages/page2.html&quot;&gt;Flash&lt;/a&gt;&lt;/button&gt;
  21.     &lt;/div&gt;
  22. &lt;/body&gt;
  24. &lt;/html&gt;
  1. body {
  2.     background: #333;
  3. }
  5. .affiche {
  6.     background-color: #333;
  7.     color: #fff;
  8.     text-align: center;
  9. }
  11. .navigation {
  12.     background-color: #333;
  13.     color: #666;
  14.     text-align: center;
  15. }
  17. @keyframes spanFadeIn {
  18.     0% {
  19.         transform: translateY(100%);
  20.     }
  22.     100% {
  23.         transform: translateY(0%);
  24.     }
  25. }
  27. span {
  28.     overflow: hidden;
  29.     display: block;
  31.     span {
  32.         display: block;
  33.         animation: spanFadeIn 500ms ease-in-out;
  34.     }
  35. }

I tried in sass but it broke everything in my html.

答案1

得分: 0

你的CSS文件中使用了SASS代码（这是不正确的），而不是嵌套 spans，请使用以下标记：

  1. body {
  2.     background: #333;
  3. }
  5. .affiche {
  6.     background-color: #333;
  7.     color: #fff;
  8.     text-align: center;
  9. }
  11. .navigation {
  12.     background-color: #333;
  13.     color: #666;
  14.     text-align: center;
  15. }
  17. @keyframes spanFadeIn {
  18.     0% {
  19.         transform: translateY(100%);
  20.     }
  22.     100% {
  23.         transform: translateY(0%);
  24.     }
  25. }
  27. span {
  28.     overflow: hidden;
  29.     display: block;
  30. }
  32. span span {
  33.     display: block;
  34.     animation: spanFadeIn 500ms ease-in-out;
  35. }
英文:

You are using SASS code in CSS file (which is incorrect), instead of nesting spans use the notation below:

  1. body {
  2.     background: #333;
  3. }
  5. .affiche {
  6.     background-color: #333;
  7.     color: #fff;
  8.     text-align: center;
  9. }
  11. .navigation {
  12.     background-color: #333;
  13.     color: #666;
  14.     text-align: center;
  15. }
  17. @keyframes spanFadeIn {
  18.     0% {
  19.         transform: translateY(100%);
  20.     }
  22.     100% {
  23.         transform: translateY(0%);
  24.     }
  25. }
  27. span {
  28.     overflow: hidden;
  29.     display: block;
  30. }
  32. span span {
  33.     display: block;
  34.     animation: spanFadeIn 500ms ease-in-out;
  35. }

huangapple
  • 本文由 发表于 2023年3月21日 01:12:42
  • 转载请务必保留本文链接：https://go.coder-hub.com/75793326.html
  • animation
  • css
  • html

“

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定