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; 新闻热点
疑难解答
