css 多种动画效果

2023-12-17 05:11:53

以下是一个示例，演示如何使用 CSS3 创建多个不同的动画效果。这里使用了 @keyframes 规则，并通过 CSS 类来应用不同的动画效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple CSS Animations</title>
    <style>
        /* 公用样式 */
        .animated-element {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            margin: 10px;
            display: inline-block;
            border-radius: 5px;
        }

        /* 旋转动画 */
        .rotate {
            animation: rotate 2s infinite linear;
        }

        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        /* 缩放动画 */
        .scale {
            animation: scale 1.5s infinite alternate;
        }

        @keyframes scale {
            from {
                transform: scale(1);
            }
            to {
                transform: scale(1.2);
            }
        }

        /* 渐变动画 */
        .fade {
            animation: fade 2s alternate infinite ease-in-out;
        }

        @keyframes fade {
            from {
                opacity: 1;
            }
            to {
                opacity: 0.3;
            }
        }
    </style>
</head>
<body>
    <div class="animated-element rotate"></div>
    <div class="animated-element scale"></div>
    <div class="animated-element fade"></div>
</body>
</html>

这个例子中定义了三个不同的动画效果：旋转、缩放和渐变。每个动画都有自己的 @keyframes 规则，并通过添加相应的 CSS 类（.rotate、.scale、.fade）来将动画应用到不同的元素上。您可以根据需要调整动画的持续时间、缓动函数和其他属性。

这只是一个基本的示例，实际上您可以根据具体的设计需求和创意添加更多的动画效果。

?

?

文章来源:https://blog.csdn.net/ITLearnHall/article/details/135030709
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。