CSS3----使用 animation 动画实现一个简单的幻灯片效果。

最新推荐文章于 2025-05-17 10:52:51 发布

原创最新推荐文章于 2025-05-17 10:52:51 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS3

CSS3 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何仅使用CSS实现一个简易的幻灯片效果，通过背景颜色的变化模拟动画过程，适用于网页设计初学者理解CSS动画原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

纯css制作一个简单的幻灯片效果

<html>
	div.ani
 <style>
        .ani{
            width: 480px;
            height: 320px;
            margin: 50px auto;
            overflow: hidden;
            box-shadow: 0 0 5px rgba(0,0,0,1);
            background-size: cover;
            background-position: center;
            -webkit-animation-name: "loops";//动画名称
            -webkit-animation-duration: 10s;
            -webkit-animation-iteration-count: infinite;//动画无限次播放
        }
        @-webkit-keyframes "loops" {
            0% {
                background-color: black;
            }
            25% {
                background-color: red;
            }
            50% {
                background-color: pink;
            }
            75% {
                background-color: blue;
            }
            100% {
                background-color: yellow;
            }
        }
    </style>