仅用HTML和CSS打造炫酷动画。

最新推荐文章于 2025-11-30 18:24:05 发布

原创最新推荐文章于 2025-11-30 18:24:05 发布 · 381 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#人工智能

CSS 动画效果：仅使用 HTML 和 CSS

现代网页设计中，动画效果能够显著提升用户体验。仅使用 HTML 和 CSS 即可实现丰富的动画效果，无需依赖 JavaScript。以下是几种常见的 CSS 动画实现方法，附带代码示例。

基础动画：`@keyframes` 与 `animation`

CSS 的 @keyframes 规则允许定义动画序列，通过 animation 属性将动画应用到元素上。以下是一个简单的旋转动画示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转动画</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            animation: rotate 2s linear infinite;
        }

        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

@keyframes rotate 定义了从 0 度到 360 度的旋转动画。
animation: rotate 2s linear infinite 将动画应用到 .box 元素上，持续 2 秒，线性运动，无限循环。

过渡动画：`transition`

CSS 过渡（transition）用于在状态变化时平滑地改变属性值。以下是一个悬停时放大的按钮示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡动画</title>
    <style>
        .button {
            padding: 10px 20px;
            background-color: #2ecc71;
            color: white;
            border: none;
            border-radius: 5px;
            transition: transform 0.3s ease;
        }