Travel:旅遊明信片

JDX練習五:旅遊明信片

範例結果

課程單元:

單元一:Banner(page1)

單元二:利用Animate建立Banner(page2)

單元三:瀑布流 jquery(page3)

單元四:圖片展示FancyBox(page4)


單元一:Banner

<div id="banner">
    <img src="../img/banner/banner1.png" width="800" height="479" alt=""/>
    <img src="../img/banner/banner2.png" width="800" height="479" alt=""/>
    <img src="../img/banner/banner3.png" width="800" height="479" alt=""/>
    <img src="../img/banner/banner4.png" width="800" height="479" alt=""/>
</div>
/*====header_banner============*/
#banner{width:800px; height:479px; position:relative;  left:50%; 
		 margin-left:-400px;overflow:hidden;}
#banner:before{ content:url(../img/banner/banner0.png); position:absolute; top:0; left:0;
				animation:banner 2s;}
#banner img:first-child{animation:bannerImg 3s 1s;  animation-fill-mode:backwards;}
#banner img:nth-child(2){animation:bannerImg 3s 2s; animation-fill-mode:backwards;}
#banner img:nth-child(3){animation:bannerImg 3s 3s; animation-fill-mode:backwards;}
#banner img:last-child{animation:bannerImg 3s 3s; animation-fill-mode:backwards;}
#banner img{position:absolute;top:0; left:0;}
#banner:after{
	content:"Travel";
	background:url(../img/banner/bannerEarth.png);
	background-size:contain;
	border-radius:50%;
	width:400px; height:350px;
	position:absolute; 	bottom:-50%; left:25%;
	box-shadow:0 -2px 40px #4B4B4B;
	text-align:center; font-size:70px; 
	padding-top:50px;
	font-family: 'Fredoka One', cursive;
	text-shadow:1px 1px 3px #000F5A;
}

@keyframes banner{ 
	0% { opacity:0;}
	100%{ opacity:1;}
}
@keyframes bannerImg{
	0%{ top:100%; left:0; opacity:0}
	100%{ top:0;left:0;opacity:1}
}