JDX-01練習說明:網站設計整合

(二)header:CSS3動畫應用

CSS3 動畫:animation(連結)

CSS3,創建動畫,它可以取代許多網頁動畫圖像,Flash動畫,和JAVAScripts

CSS美化

/*header============================================================*/
header{height: 560px; width: 100%;  animation: banerMovie 10s infinite ; }

@keyframes banerMovie{
    0%{background: url(images/banner01.jpg) no-repeat center center;background-size:cover; }
    30%{background: url(images/banner02.jpg) no-repeat center center;background-size:cover; }
    50%{background: url(images/banner03.jpg) no-repeat center center;background-size:cover;}
    75%{background: url(images/banner04.jpg) no-repeat center center;background-size:cover; }
    100%{background: url(images/banner01.jpg) no-repeat center center;background-size:cover; }
}