css3动画切换div

CSS3动画是一种非常强大的工具，可以为网页设计带来更加生动而有趣的元素。其中一种典型的应用就是切换DIV的动画效果，下面我们就来看一看如何使用CSS3动画实现这一效果。

HTML代码：
<div id="Box1" class="Box">这是第一个DIV</div>
<div id="Box2" class="Box">这是第二个DIV</div>

CSS代码：
.Box {
    width: 200px;
    height: 200px;
    background-color: #eee;
    margin: 50px auto;
    text-align: center;
    font-size: 24px;
    line-height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
}
.Box.active {
    opacity: 1;
    animation: fade 1s ease forwards;
}
@keyframes fade {
    0% {
        opacity: 0;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

JavaScript代码：
var Boxes = document.querySelectorAll('.Box');
var current = 0;
setInterval(function() {
    Boxes[current].classList.remove('active');
    current++;
    if (current == Boxes.length) {
        current = 0;
    }
    Boxes[current].classList.add('active');
},2000);

css3动画切换div

首先我们实现了两个基本的DIV，其中每个DIV都有一个唯一的ID和共同的class属性。在CSS代码中我们定义了一些基本的样式，如宽高、背景色等，并利用CSS3中的opacity特性将初始状态调整为不可见状态。接着，我们定义了一个.active类，其中包括了opacity的值为1，并利用animation属性将其与fade这个keyframe联系起来，达到了淡入动画的效果。在JavaScript代码中，我们选中了所有的.Box元素，并使用setInterval()函数实现了轮换动画的循环，可以根据自己的需要进行修改。

相关推荐