範例2-3:Travel

範例結果


P1:CSS3:Animation應用
P2:Video結合


一、CSS3 :Animation應用1

(1) 練習1

Html結構

<h3>CSS3:animation應用</h3>
<div id="Anslider">
    <img src="../AnSlider/AnSlider01.png" width="1000" height="450" alt=""/>
    <img src="../AnSlider/AnSlider02.png" width="1000" height="450" alt=""/>
    <img src="../AnSlider/AnSlider03.png" width="1000" height="450" alt=""/>
    <img src="../AnSlider/AnSlider04.png" width="1000" height="450" alt=""/>
    <img src="../AnSlider/AnSlider05.png" width="1000" height="450" alt=""/>
</div>

CSS3美化

#Anslider{
    width: 1000px; height: 450px; margin: 50px auto;
    position: relative; overflow: hidden;
}
#Anslider img{ position: absolute; }
#Anslider img:nth-child(1){animation: Anslider1 10s infinite; z-index: 1; }
#Anslider img:nth-child(2){top:450px;animation: Anslider2 10s infinite; z-index: 4;}
#Anslider img:nth-child(3){top:450px;animation: Anslider3 10s infinite; z-index: 2;}
#Anslider img:nth-child(4){top:450px;animation: Anslider4 10s infinite;z-index: 2;}
#Anslider img:nth-child(5){left:-1000px;animation: Anslider5 10s infinite; z-index: 3;}
@keyframes Anslider1{
    0%{ opacity:0;}
    25%{ opacity:1; }
    50%{ }
    75%{ }
    100%{ }
}
@keyframes Anslider2{
    0%{ }
    25%{ top:0;}
    50%{ top:0;}
    75%{ top:0;}
    100%{top:0; }
}
@keyframes Anslider3{
    0%{ }
    25%{ }
    50%{ top:0;}
    75%{ top:0;}
    100%{ top:0;}
}
@keyframes Anslider4{
    0%{ }
    25%{ }
    50%{ }
    75%{top:0}
    100%{top:0}
}
@keyframes Anslider5{
    0%{ }
    25%{ }
    50%{ }
    75%{ }
    100%{ left:0px; }
}

(2) 練習2

<h3>CSS3:animation應用2</h3>
<div id="sliderMovie">
     <img src="../images/slider01.jpg" width="1920" height="480" alt=""/> 
     <img src="../images/slider02.jpg" width="1920" height="480" alt=""/> 
     <img src="../images/slider03.jpg" width="1920" height="480" alt=""/> 
     <img src="../images/slider04.jpg" width="1920" height="480" alt=""/> 
</div>

CSS美化

/* #sliderMovie  【CSS3:animation應用2】設定==========*/
#sliderMovie{
    position: relative; margin:0  auto 50px;
    border-radius: 10px; border: 10px solid #2D1F09;
    overflow:hidden; }

#sliderMovie img{ 
    position: absolute; top: 0; left: 0;
    width: 100%; min-width: 1000px; height: auto;
    box-shadow: 0 20px 50px #000;
			 }
#sliderMovie img:nth-child(1){animation: sliderMovie1 10s infinite; z-index: 4;}
#sliderMovie img:nth-child(2){animation: sliderMovie2 10s infinite; z-index: 3;}
#sliderMovie img:nth-child(3){animation: sliderMovie3 10s infinite; z-index: 2;}
#sliderMovie img:nth-child(4){animation: sliderMovie4 10s infinite; z-index: 1;}

@keyframes sliderMovie1{
	0%{ opacity:1; }
	25%{ opacity:0;}
	50%{ opacity:0;}
	75%{ opacity:0;}
	100%{ opacity:0;}
}
@keyframes sliderMovie2{
	0%{ opacity:0; }
	25%{ opacity:1;}
	50%{ opacity:0;}
	75%{ opacity:0;}
	100%{ opacity:0;}
}
@keyframes sliderMovie3{
	0%{ opacity:0; }
	25%{ opacity:0;}
	50%{ opacity:1;}
	75%{ opacity:0;}
	100%{ opacity:0;}
}
@keyframes sliderMovie4{
	0%{ opacity:0; }
	25%{ opacity:0;}
	50%{ opacity:0;}
	75%{ opacity:1;}
	100%{ opacity:.8;}
}

JQ :調整圖片高度

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
//CSS3:animation應用2
    sliderScale();
    function sliderScale (){
        var $sliderH =$('#sliderMovie img').css('height');
        $('#sliderMovie').css({'height':$sliderH});
    }

    $(window).resize(function(){
         sliderScale();
    })
</script>