Html5_animation动画

CSS动画案例

最新推荐文章于 2025-01-08 09:00:00 发布

原创最新推荐文章于 2025-01-08 09:00:00 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

本文通过两个实例展示了如何使用CSS3的@keyframes实现动画效果。第一个例子让一个带有背景图片的div元素进行无限旋转，第二个例子则使一个红色的正方形div元素在六秒内无限循环地改变其宽高。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <style>
        @keyframes rotate {
            from {
                /* 动画刚开始，角度 */
                transform: rotate(0deg);
            }
            to {
                /* 动画结束时，角度 */
                transform: rotate(360deg);
            }
        }

        @keyframes change {
            0% {
                /* 动画刚开始，div的宽高 */
                width: 200px;
                height: 200px;
            }
            50% {
                /* 动画执行一半时，div的宽高 */
                width: 100px;
                height: 400px;
            }
            100% {
                /* 动画执行完毕时，div的宽高 */
                width: 200px;
                height: 200px;
            }
        }
    </style>

</head>
<body>

<!-- animat_rotate：动画名；6s：总执行时间；linear：平滑；infinite：无限重复（去了，只执行一次）-->
<div style="animation: rotate 5s linear infinite; width: 200px;height:200px; margin: 50px 50px 50px 50px; background: url('http://file.popoho.com/wzfzl/20160706/q0rafysiogkco140510110S8-25.jpg') no-repeat;"></div>

<!-- animat_rotate：动画名；6s：总执行时间；linear：平滑；infinite：无限重复（去了，只执行一次）-->
<div style="animation: change 5s linear infinite; width: 500px;height: 500px; margin: 100px 100px 100px 100px; background-color: red"></div>

</body>
</html>