PetHouse(2016)練習2

範例結果

七、footer區利用CSS3動畫設計

圖片下載:圖片1圖片2

<div class="footermove"></div>
/*footerMove=====================*/
.footer{margin-bottom: 100px;}
.footermove{
    width: 100%; height: 100px;
    position: fixed; z-index: 99; left: 0; bottom: 0; 
}
.footermove:before {
    content: '';
	background: url(img/bgmove.png) left bottom; background-size:auto 100%;
    width: 300%; height: 100px;
    position: absolute;left: 0; bottom: 0; 
    animation: footermove 70s linear infinite;
}
.footermove:after {
    content: '';
	background: url(img/bgmovecar.png) left bottom; background-size:auto 100%;
    width: 300%; height: 100px;
    position: absolute;left: 0; bottom: 0; 
    animation: footermovecar 50s linear infinite;	
}

@keyframes footermove{
    0%{left: -100%;}
    100%{left:0%;}
}
@keyframes footermovecar{
    0%{left: 0%;}
    100%{left:-100%;}
}