css3div切换特效 |css html jsp

首先，大家需要在CSS中设置一个div容器，如下：

#container{
width:500px;
height:500px;
margin:0 auto;
}

接着，大家需要准备一组图片，然后使用CSS设置每个图片的样式。例如：

#pic1{
background-image:url('pic1.jpg');
background-size:cover;
width:500px;
height:500px;
}
#pic2{
background-image:url('pic2.jpg');
background-size:cover;
width:500px;
height:500px;
}

随后，大家需要用JavaScript来控制切换效果。例如，大家可以将两个div在页面中左右排列，每个div对应一个图片。使用jQuery库控制图片的切换：

$('#pic1').fadeIn(500);
$('#pic2').fadeOut(500);
//500毫秒的时间内，图片1淡入，图片2淡出

为了使切换效果更加动态，大家可以增加CSS3的动画效果。例如，在图片1淡入时可以添加翻转或者旋转动画效果，如下：

#pic1{
animation: rotateIn 1s;
-webkit-animation: rotateIn 1s;
animation-delay:300ms;
-webkit-animation-delay:300ms;
background-image:url('pic1.jpg');
background-size:cover;
width:500px;
height:500px;
}
@keyframes rotateIn{
from{
transform:rotate(-360deg);
}
to{
transform:rotate(0deg);
}
}
@-webkit-keyframes rotateIn{
from{
-webkit-transform:rotate(-360deg);
}
to{
-webkit-transform:rotate(0deg);
}
}

这样，在切换效果中添加了动态效果，网页的交互和美观程度更加提升了。