如何在頁面加載時淡入圖像

如何讓我的圖像在桌面和移動設備的頁面加載時淡入？目前我的代碼僅適用於移動設備。如何在頁面加載時淡入圖像

CSS：

#test img { 
    width: auto; 
    height: 50px; 
    position: absolute; 
    -webkit-animation: fadein 7s; 
    -moz-animation: fadein 7s; 
    -ms-animation: fadein 7s; 
    -o-animation: fadein 7s; 
    animation: fadein 7s; 
} 

@media only screen and (max-width: 768px) { 
    #test img { 
    width: auto; 
    height: 20px; 
    position: absolute; 
    } 
}

來源

2017-10-18 Samantha

的可能的複製[使用CSS的淡入在頁面加載效果（https://stackoverflow.com/questions/11679567/using -css-for-fade-in-effect-on-load） – JSnewbie

動畫還需要關鍵幀，因此它知道從哪裏開始和結束。在這種情況下，您的fadein動畫片即將關閉。它還需要開始和結束的不透明度，以便從不可見到可見。嘗試添加下面的關鍵幀：

@keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
}

工作小提琴這裏：https://jsfiddle.net/70p9cxdb/1/

來源

2017-10-18 18:57:19

這很好用，謝謝！ – Samantha

我不能肯定地說，因爲沒有提供的css，但是我覺得你的關鍵幀，將在媒體查詢僅適用於移動。類似@media only screen and (max-width: 768px) {

來源

2017-10-18 18:51:31 Dale

如何在頁面加載時淡入圖像

回答

相關問題