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