我寫了一個簡單的函式 .onload ,其中一個 'p' 和 'h1' 標簽來自 opacity:0; 至不透明度 1;. 影片很好,但有時在影片發生時,看起來 p 和 h1 標簽的背景顏色在影片發生時設定為灰色,然后在影片結束后消失,這只發生在 Firefox 上。 在此處查看影片錯誤
const abouth1 = document.querySelector(".about-h1");
const aboutp = document.querySelector(".about-p");
const logo = document.querySelector(".logo");
function fadeFunction() {
abouth1.classList.add("about-show-h1");
aboutp.classList.add("about-show-p");
logo.classList.add("logo-show");
}
window.onload = fadeFunction();
.about-h1 {
opacity: 0;
transition: 1.5s;
transform: translateX(45%);
}
.about-p {
margin-top: 1.25em;
font-size: 1rem;
opacity: 0;
transition: 2s;
transform: translateX(-65%);
}
.about-show-p {
opacity: 1;
transform: translateX(0);
}
.about-show-h1 {
opacity: 1;
transform: translateX(0);
}
<h1 class="about-h1">
My name is Drinos Shala, <br />
and I am a senior software developer who <br />
specializes in front-end technologies.
</h1>
<p class="about-p">
My job is to ensure your website is pixel perfect in every
dimension,
<br />
years of working in this field have granted me the experience needed
<br />
to deploy every website I start in great success! <br />Let's get in
touch so we can get started on your dream website for your dream
business.
</p>
uj5u.com熱心網友回復:
如果您有任何第三方 Firefox 擴展程式嘗試洗掉它們,在我的 Firefox 瀏覽器上看起來不錯,并且添加夜間模式擴展程式(即使已關閉)會導致此錯誤。
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/397295.html
標籤:css
下一篇:如何使類覆寫元素CSS樣式?
