CSS animate HelloWorld

最新推荐文章于 2024-05-14 16:04:48 发布

转载最新推荐文章于 2024-05-14 16:04:48 发布 · 559 阅读

CSS 专栏收录该内容

94 篇文章

订阅专栏

本文介绍了一个使用CSS实现的动画案例，详细展示了如何设置动画属性、关键帧及动画效果，通过一个简单的例子帮助读者理解CSS动画的基本用法。

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

CSS animate 学习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
     <style>
        .container {
            width:100px;
            height: 100px;
            border:1px solid gray;
            animation: myfirst 2s infinite linear;
            position: absolute;
        }
        @keyframes myfirst
        {
            0% {background: red;  left:0px;}
            50% {background: yellow; left:1000px;}
            100% {background: red;left:0px;}
        }
    </style>
</head>
<body>
<div class="container" >
    你好
</div>

<script>

</script>
</body>
</html>