1. 實現背景圖片的動態變換
首先在HTML頁面body板塊中，添加圖片div，代碼如下：
<body>
<div class="bgk">
<div class="bgk-image" style="background-image: url('${pageContext.request.contextPath}/img/1.jpg')"></div>
<div class="bgk-image" style="background-image: url('${pageContext.request.contextPath}/img/2.jpg')"></div>
<div class="bgk-image" style="background-image: url('${pageContext.request.contextPath}/img/3.jpg')"></div>
<div class="bgk-image" style="background-image: url('${pageContext.request.contextPath}/img/4.jpg')"></div>
</body>再對圖片進行css設計。你要對圖片進行大小定位，那么以下代碼肯定要首先編寫：
`.bgk {
margin: auto;
position: absolute;
width: 1366px;
height: 672px;
overflow: hidden; /*溢出部分隱藏*/
}`位置設定ok以后，那么再對里面的圖片進行設置。為了使圖片能足夠大覆蓋頁面，則代碼必須有 background-size: cover;
要實現動態效果，那么你的css代碼中必須有動畫的設計：
-webkit-animation-name: kenburns; /*-animation-name:為@keyframes 動畫規定名稱,必須與-animation-duration同時使用，否則無動畫效果*/
animation-name: kenburns; /*或者：后面值為需要綁定到選擇器上的keyframe名稱*/
-webkit-animation-duration: 16s; /*定義動畫完成一個周期所需時間*/
animation-duration: 16s;
-webkit-animation-timing-function: linear; /*規定動畫從頭到尾以相同速度播放，還有其他幾個速度值*/
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite; /*規定動畫播放次數，infinite為無限次*/
animation-iteration-count: infinite;
-webkit-transform: scale(1.2); /*規定動畫的縮放特效，scale：規定2D縮放*/
transform: scale(1.2);
-webkit-filter: blur(10px); /*定義圖片的模糊程度，顯示為毛玻璃效果*/
filter: blur(10px);在綁定每個子元素選擇器，有幾張圖片就綁定幾個選擇器：
.bgk-image:nth-child(1) {
-webkit-animation-name: kenburns-1; /*選擇器上的名稱*/
animation-name: kenburns-1;
z-index: 3; /*動畫堆疊順序，值越大表示越先播放，離用戶越近*/
}
.bgk-image:nth-child(2) {
-webkit-animation-name: kenburns-2;
animation-name: kenburns-2;
z-index: 2;
}
.bgk-image:nth-child(3) {
-webkit-animation-name: kenburns-3;
animation-name: kenburns-3;
z-index: 1;
}
.bgk-image:nth-child(4) {
-webkit-animation-name: kenburns-4;
animation-name: kenburns-4; 新聞熱點
疑難解答
