1
这可能有一个明显的答案，但我只是没有看到它。我更新了这个代码来纠正具有article section h1错误top值。我还添加了:hover触发article section h1。否则，这是我从webdesigner杂志拿到的相同代码来演示动画标题效果，但FF或Chrome中都没有发生。我为转换样式添加了-webkit和-moz-前缀，但仍然没有。请告诉我我做错了什么。即使使用-webkit-和-moz-前缀，教程的css过渡也不起作用
body,html {
\t display:block;
\t width: 100%;
\t height: 100%;
\t background: white;
\t color:black;
\t padding: 0;
\t margin: 0;
\t font-family: Helvetica, sans-serif;
}
nav {
\t position:fixed;
\t top: 0;
\t width: 100%;
\t z-index: 9999;
\t background: white;
}
article {
\t position: relative;
\t padding-top: 5em;
}
article section {
\t position: absolute;
\t opacity: 0;
\t width: 100%;
}
article section:target {
\t left: 0;
\t opacity: 1;
\t z-index: 9999;
}
article section h1 {
\t position: absolute;
\t top: 0em;
\t left: 0;
\t font-size: 4em;
\t width: 100%;
\t color:black;
\t
}
article section h1:hover {
\t text-shadow: 0 998em 2 em #000;
\t transition: text-shadow 1.5s;
\t -webkit-transition: text-shadow 1.5s;
\t -moz-transition:text-shadow 1.5s;
}
nav {
\t display:block;
\t width: 100%;
\t padding: 2em;
\t text-align: center;
}
nav a {
\t color: black;
\t text-decoration: none;
\t padding: 1em 2em;
\t margin-right: 1em;
}
nav > a:hover {
\t border-bottom: .5em solid #c00;
}<nav>
\t \t <a href="#first">Option</a>
\t \t <a href="#second">Option</a>
\t \t <a href="#third">Option</a>
\t \t
\t </nav>
\t
\t <article>
\t \t <section id="first">
\t \t \t <h1>First title</h1>
\t \t </section>
\t \t <section id="second">
\t \t \t <h1>Second title</h1>
\t \t </section>
\t \t <section id="third">
\t \t \t <h1>Third title</h1>
\t \t </section>
\t </article>
您的小提琴有缺陷。用那个CSS，你的'部分'永远不会出现，所以你可以看到过渡工作。出于这个原因，你的真实意图还不清楚。请重新编写您的代码，以便我们为您提供帮助。 – VictorGodoi