css3制作动画ppt

CSS3制作动画PPT是一种比较新颖的展示方式，绝对会给您的演示带来不同寻常的视觉体验。下面将介绍如何使用CSS3制作动画PPT。

.slide {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    position: relative;
}

.slide div {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    animation-duration: 1.5s;
}

.slide div:nth-of-type(1) {
    animation-name: fadeIn;
}

.slide div:nth-of-type(2) {
    animation-name: slideInLeft;
}

.slide div:nth-of-type(3) {
    animation-name: slideInRight;
}

.slide div:nth-of-type(4) {
    animation-name: zoomIn;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        left: -100%;
    }

    to {
        left: 50%;
    }
}

@keyframes slideInRight {
    from {
        right: -100%;
    }

    to {
        right: 50%;
    }
}

@keyframes zoomIn {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

我们先在HTML代码中创建一个“slide”类的元素，用来容纳幻灯片，然后在其中创建要展示的各元素，每一个元素都有一个不同的CSS动画。

在CSS中，针对每个要展示的元素，都定义了一些animation属性，控制动画效果，使用了一些CSS3的预定义关键帧动画（keyframe）。

通过将不同的动画效果应用于不同的元素，在一次幻灯片切换中，可以创造出很棒的动画效果。

总之，制作动画PPT，使用CSS3可以得到很多创意和灵活性，去实现各种各样的自定义动画效果。