復雜的加載頁面動畫

Question

在您閱讀其余部分之前，這可能被認為是一個廣泛的問題。 如果是這樣的話，我很抱歉，但除了這個我沒有其他方法可以問它。

所以，我想到了一個加載頁面動畫，我認為它很復雜，但可能不是。

我想要實現的是：

當頁面加載時（比方說索引頁面），你會看到一個人看着他/她的智能手機（或桌面顯示器，取決於媒體查詢）的觀點。 所以你基本上會看到你現在看到的。 如果您在椅子或沙發上，您可能會看到您的腿、手、環境，當然還有設備。 在該設備上，您會看到索引頁的縮影，就像那個人正在查看您的網站一樣。

好的，現在當頁面加載時，您會在智能手機/桌面顯示器上看到縮放，就像您要“進入顯示在該人的智能手機/桌面顯示器屏幕上的內容”一樣，當它完全加載時，您會看到實際網站完全顯示在您的設備上。

換句話說，在動畫中，那個人的設備變成了你的設備。 希望我說得夠清楚了。

我想過的可能解決方案

將索引頁面的屏幕截圖放在動畫設備上，然后使用transform: scale(); 用於縮放，但是一旦頁面完全加載，我怎么能擺脫動畫的內容，然后顯示實際的網站？
使用transform: scale();縮小整個<body>元素transform: scale(); 並定位在人的設備上，當頁面 id 使用transform: scale();加載時transform: scale(); 再次放大到完整視口的大小。

請注意，我只列出了 CSS 解決方案，因為我剛剛開始學習 JS。

重要提示：我不希望任何人為我編寫該代碼。 我只想知道是否有解決方案，以及我想到的解決方案是否可行。 或者，如果我應該使用 JS 或其他我不知道的東西來實現這個動畫。

Answer 1

我想過的可能解決方案

將索引頁面的屏幕截圖放在動畫設備上，然后使用 transform: scale(); 用於縮放，但是一旦頁面完全加載，我怎么能擺脫動畫的內容，然后顯示實際的網站？

一旦頁面完全加載，您可以在 javascript 的幫助下擺脫動畫的內容：

window.addEventListener("load", function () {
  var AnimationContent= document.querySelector("#ID OF YOUR ANIMATION CONTENT");

  AnimationContent.remove();

  // or

  AnimationContent.style.display = "none";

});

復雜的加載頁面動畫

問題描述

1 個解決方案

解決方案1
1 2020-09-05 17:57:59

復雜的加載頁面動畫

問題描述

1 個解決方案

解決方案1 1 2020-09-05 17:57:59

解決方案1
1 2020-09-05 17:57:59