css3 animation demo

实践是最好的老师

已于 2024-02-04 11:53:17 修改

阅读量292

点赞数

分类专栏： css 文章标签： css3

于 2020-10-15 10:52:14 首次发布

本文链接：https://blog.csdn.net/qq_26889291/article/details/109092939

版权

css 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

这个博客展示了如何使用CSS实现一个简单的动画效果，包括一个div元素左右移动的动画和一个p元素颜色渐变的动画。通过`@keyframes`规则定义了动画过程，`animation`属性指定了动画的细节，如持续时间、缓动函数和重复次数。博客内容对于理解CSS动画基础非常有帮助。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animation</title>
    <style>
        div {
            width: 50px;
            height: 50px;
            position: absolute;
            background-color: royalblue;
            animation: yexianli 5s ease-in-out;
            animation-iteration-count: infinite;
        }

        @keyframes yexianli {
            from {
                left: 0px;
            }

            to {
                left: 100px
            }
        }

        p {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 100px;
            background-color: royalblue;
            animation: yexianli1 5s ease-in-out;
            animation-iteration-count: infinite;
        }

        @keyframes yexianli1 {
            0% {
                background-color: skyblue;
            }

            25% {
                background-color: yellow;
            }

            50% {
                background-color: yellowgreen;
            }

            75% {
                background-color: green;
            }

            100% {
                background-color: royalblue;
            }
        }
    </style>
</head>

<body>
    <div></div>
    <p></p>
</body>

</html>