0
我想知道如何處理頁面轉換，因爲我對他們來說很陌生。CSS頁面轉換
我想補充的codrops出的這些隨機過渡，在這個演示中使用：https://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/
的事情是，我已經在YouTube上看過的教程，都是隻使用一個.html文件。我的結構有點不同，有多個.html文件（聯繫人，圖庫）等一個css風格
這是我的html文件。我試着按照關於codrops的步驟進行，但是我以白屏結束。任何人有這方面的經驗？
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="Style.css"/>
<title>Untitled Document</title>
</head>
<body>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="Index.html">Domov</a>
<a href="Gallery.html">Galéria</a>
<a href="Contact.html">Kontakt</a>
<a href="Aboutme.html">O mne</a>
</div>
<script>
/* Set the width of the side navigation to 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
/* Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<div id="first">
<ul>
<li><a href="#" id="up" onClick="openNav()" >Menu</a></li>
</ul>
<div id="block">
<h2>Filip Ducký</h2>
<p id="desc">Portfoilo</p>
<br><br><br><br><br><br><br>
<a href="#" class="tlacitko">Moje Práce</a>
</div>
</div>
<div id="second">
<section>
<img src="Img/Info.png" class="info" alt="">
<h3>Grafik</h3>
<p class="info2">Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.</p>
</section>
<section>
<img src="Img/Info.png" class="info" alt="">
<h3>Webové stránky</h3>
<p class="info2">Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.</p>
</section>
<section>
<img src="Img/Info.png" class="info" alt="">
<h3>3D</h3>
<p class="info2">Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.</p>
</section>
</div>
<div id="third">
<div class="am1">
<img src="Img/Info_dark.png" class="am2" alt="">
<h3 id="omne">O mne</h3>
<p class="am3">Lorem Ipsum je fiktívny text, používaný pri návrhu tlačovín a typografie. Lorem Ipsum je štandardným výplňovým textom už od 16. storočia, keď neznámy tlačiar zobral sadzobnicu plnú tlačových znakov a pomiešal ich, aby tak vytvoril vzorkovú knihu. Prežil nielen päť storočí, ale aj skok do elektronickej sadzby, a pritom zostal v podstate nezmenený. Spopularizovaný bol v 60-tych rokoch 20.storočia, vydaním hárkov Letraset, ktoré obsahovali pasáže Lorem Ipsum, a neskôr aj publikačným softvérom ako Aldus PageMaker, ktorý obsahoval verzie Lorem Ipsum.</p>
</div>
<br><br><br>
<a href="#" class="tlacitko2">Kontakt</a>
<br><br><br><br>
</div>
<footer>
<div id="left">
<p id="fot"> © 2017</p>
</div>
<div id="right"><a href="#up"><img id="arrow" src="Img/arrow.png" alt=""></a></div>
</footer>
</body>
</html>
我想在頁面之間進行轉換。主頁 - 畫廊，畫廊 - 聯繫人等。如果從帖子中不明確，我表示歉意。
這是不可能的多個HTML的文件之間的轉換。你想轉換的容器都必須在同一個html文件中。高級模式：您可以使用ajax加載新頁面並將其注入當前頁面的容器中。 – Thomas
哦，謝謝你讓我知道。 – Filip5
威爾這是一個選項？ ...可能的重複http://stackoverflow.com/questions/16289964/how-to-add-transition-when-loading-a-web-page – LGSon