html动画特效代码

作者：一杯酒悲痛人发布日期:2026-03-09 浏览:82

<!DOCTYPE html>
<html>
<head>
    <title>HTML 动画特效代码</title>
    <style>
        /* 定义动画的关键帧 */
        @keyframes example {
            0%   { background-color: red; left: 0px; top: 0px; }
            25%  { background-color: yellow; left: 200px; top: 0px; }
            50%  { background-color: blue; left: 200px; top: 200px; }
            75%  { background-color: green; left: 0px; top: 200px; }
            100% { background-color: red; left: 0px; top: 0px; }
        }

        /* 应用动画到元素 */
        #animate {
            width: 100px;
            height: 100px;
            position: relative;
            background-color: red;
            animation-name: example;
            animation-duration: 4s;
            animation-iteration-count: infinite;
        }
    </style>
</head>
<body>

    <!-- 动画元素 -->
    <div id="animate"></div>

</body>
</html>

解释说明：

@keyframes：定义了一个名为 example 的动画，包含多个关键帧（从 0% 到 100%），每个关键帧设置了不同的样式属性（如背景颜色、位置等）。
#animate：选择器应用于一个 div 元素，设置其宽度、高度、位置和初始背景颜色，并应用了之前定义的 example 动画。通过 animation-duration 设置动画持续时间为 4 秒，并通过 animation-iteration-count 设置为无限循环。
HTML 结构：在 <body> 中创建了一个 div 元素，该元素将执行定义的动画效果。

这个示例展示了如何使用 CSS 动画来创建一个简单的动画效果，元素会在页面中移动并改变颜色。

上一篇：html 在线预览

下一篇：html如何添加背景图片