Question

我在Codepen中建立了一个基本的保存页面 https://codepen.io/smithandsuch/full/KGarVO/并在动画中添加了一些基本的淡入淡出功能，但是当将相同的代码上传到我的网站http://www.smithandsuch.com/时，动画不起作用，我真的不知道为什么，有人可以帮助吗？

我从经验中知道，codepen似乎对编写得不好的代码相当宽容，但是我掉了CSS并找不到任何错误。我也将CSS放在括号中，以查看是否有任何错误，并且我也找不到任何错误。

function update() {
  $('#clock').html(moment().format('ddd DD MMM YYYY H:mm'));
}

setInterval(update, 1000);

/*-----animation-----*/

.fade-in {
	-webkit-animation: fade-in 1s ease-in-out 0.9s both;
     -moz-animation: fade-in 1s ease-in-out 0.9s both;
	        animation: fade-in 1s ease-in-out 0.9s both;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


* {
  padding: 0;
  margin: 0;
}


body {
  margin: 10px 20px;
  background: #f8f8f8f8;
  min-width: 375px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "futura-pt";
  font-weight: 600;
  font-style: normal;
  color: #0b1c26;
  text-align: left;
  opacity: 1;
  }

.h1-hero {
  max-width:1440px;
  font-size: 4.4em;
  margin: auto;
  padding-bottom: 2em;
  opacity: 1;
}

h2 {
  font-size: 2.4em;
}

h3 {
  font-size: 1.4em;
}

a {
  color: #0b1c26;
}

header {
  height: 60px;
}

.hero {
  height: calc(100vh - 140px);
  width: 100vw;
  display: flex;
  justify-content: center;
  /*align-items: center;*/
  flex-direction: column;
}

footer {
 height: 60px;
 display: flex;
 align-items: center;
 justify-content: space-between;
}

.red {
  color: #FF5733;
}

/*-----media queries-----*/ 

@media screen and (min-width:375px) and (max-width:768px) {
  body {
  margin: 10px 10px;
  }
   .h1-hero {
  font-size: 2em;
  max-width: 768px;
  }
  h2 {
  font-size: 1.5em;    
  }
  h3 {
  font-size: 1.2em;    
  }
  .h3-today {
    display: none;
  }
  body {
    overflow: hidden;
  }
}

<body>
  <header><h2 class="fade-in">&AMP;<span class="red">.</span></h2>
  </header>
    <div class="hero">
      <h1 class="h1-hero fade-in">Hi, I'm Andrew a Freelance Web designer and Front-End Developer based in London<span class="red">.</span><br>I design modern intuitive websites with a focus on good UX design<span class="red">.</span></h1>
  </div>
  <footer>
    <h3 class="h3-today fade-in"><span id="clock">Today I'm...</span> | Coding: <a href="http://wink.smithandsuch.com/" target="_blank">wink</a> | Watching: <a href="https://www.youtube.com/watch?v=L6cDDmk-O5A" target="_blank">Maniac</a> | Listening: <a href="https://www.youtube.com/watch?v=aamiinOWLhI" target="_blank">Surfbort - Hippie Vomit Inhaler</a></h3> 
    <h3 class="fade-in">Contact: <u>andrew@smithandsuch.com</u></h3>
  </footer>
</body>

Answer 1

您可以确认已链接CSS文件吗？我加载了您拥有的所有内容，它看起来与Codepen完全相同。

上传我的代码，以便您可以看到与我们两个代码有何不同。

        <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <meta name="description" content="Hi, I'm Andrew a Freelance Web designer and Front-End Developer based in London. I design modern intuitive websites with a focus on good UX design."/>
  <link rel="stylesheet" href="main.css">
  <link rel="stylesheet" href="https://use.typekit.net/fxo7lqf.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FitText.js/1.1/jquery.fittext.min.js"></script>
<script>

  function update() {
    $('#clock').html(moment().format('ddd DD MMM YYYY H:mm'));
  }

  setInterval(update, 1000);</script>
</head>
<body>
  <header><h2 class="fade-in">&AMP;<span class="red">.</span></h2>
  </header>
    <div class="hero">
      <h1 class="h1-hero fade-in">Hi, I'm Andrew a Freelance Web designer and Front-End Developer based in London<span class="red">.</span><br>I design modern intuitive websites with a focus on good UX design<span class="red">.</span></h1>
  </div>
  <footer>
    <h3 class="h3-today fade-in"><span id="clock">Today I'm...</span> | Coding: <a href="http://wink.smithandsuch.com/" target="_blank">wink</a> | Watching: <a href="https://www.youtube.com/watch?v=L6cDDmk-O5A" target="_blank">Maniac</a> | Listening: <a href="https://www.youtube.com/watch?v=aamiinOWLhI" target="_blank">Surfbort - Hippie Vomit Inhaler</a></h3> 
    <h3 class="fade-in">Contact: <u>andrew@smithandsuch.com</u></h3>
  </footer>
</body>
</html>
//css in a sheet called main.css
.fade-in {
  -webkit-animation: fade-in 1s ease-in-out 0.9s both;
  animation: fade-in 1s ease-in-out 0.9s both;
}

@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

* {
  padding: 0;
  margin: 0;
}

body {
  margin: 10px 20px;
  background: #f8f8f8f8;
  min-width: 375px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "futura-pt";
  font-weight: 600;
  font-style: normal;
  color: #0b1c26;
  text-align: left;
  opacity: 1;
}

.h1-hero {
  max-width: 1440px;
  font-size: 4.4em;
  margin: auto;
  padding-bottom: 2em;
  opacity: 1;
}

h2 {
  font-size: 2.4em;
}

h3 {
  font-size: 1.4em;
}

a {
  color: #0b1c26;
}

header {
  height: 60px;
}

.hero {
  height: calc(100vh - 140px);
  width: 100vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  /*align-items: center;*/
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

footer {
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.red {
  color: #FF5733;
}

/*-----media queries-----*/
@media screen and (min-width: 375px) and (max-width: 768px) {
  body {
    margin: 10px 10px;
  }
  .h1-hero {
    font-size: 2em;
    max-width: 768px;
  }
  h2 {
    font-size: 1.5em;
  }
  h3 {
    font-size: 1.2em;
  }
  .h3-today {
    display: none;
  }
  body {
    overflow: hidden;
  }
}

CSS动画无法在Codepen之外运行

1 个答案: