出于某种原因从页面加载开始过渡

问题描述 投票：1回答：1

更新：当我在内部放置CSS时，问题消失了。我进入了chrome浏览器的开发工具，并比较了重新加载页面时发生的情况。第一张图片使用内部CSS，第二张图片使用外部样式表，您可以看到background-color属性的不同结果：

enter image description hereenter image description here

Initial post：我不知道为什么会这样，这里是demonstration。基本上，a需要一些时间才能完全显示在页面上。

“完全”出现所需的时间与transition: background 5s;中指定的持续时间相同，为5秒。

在另一个未观察到效果的page上有相同的代码，我也在同一浏览器中将其打开。

这是我在Visual Studio和Chrome中的代码，在Edge中观察到相同的行为，但在Firefox中观察不到，在Firefox中，它会按预期加载并且:hover效果正常。在撰写本文时，所有3种浏览器均已更新为最新版本。

仅当我链接到外部CSS样式表时，才会发生这种情况。当我将CSS复制到html文件时，问题就消失了！！！

enter image description hereenter image description here

CSS

a {
  color: #fff;
  border: none;
  margin: 20px;
  padding: 10px 20px;
  display: inline-block;
  font: bold 18px sans-serif;
  background: #fd7c2a;
  text-decoration: none;
  -webkit-transition: background 5s; /* For Safari 3.0 to 6.0 */
  transition: background 5s; /* For modern browsers */
}

a:hover {
  background: #3cc16e;
}

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="" />
    <!-- Specifies a description of the page. Search engines can pick up this description to show with the results of searches -->
    <meta name="keywords" content="" />
    <!-- Specifies a comma-separated list of keywords - relevant to the page -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title></title>
  </head>

  <body>
    <p><a href="#">Hover on me</a></p>
  </body>
</html>
html css css-transitions
1个回答
0
投票

我解决了这个问题，一直在通过Google寻找答案。解决方案是在HTML文件中添加<script> </script>开头和结尾标签，并以空格分隔。显然，这是前面提到的浏览器中的错误。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.