HTML5中利用animation属性实现风车动画案例

最新推荐文章于 2022-11-24 18:01:56 发布

小獾哥

最新推荐文章于 2022-11-24 18:01:56 发布

阅读量3.2k

点赞数 3

分类专栏： Web前端文章标签： html5 动画

本文链接：https://blog.csdn.net/qq_26870933/article/details/78745453

版权

Web前端专栏收录该内容

69 篇文章 3 订阅

订阅专栏

这里写图片描述

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 设置风车旋转函数 */
        @keyframes zhuan {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        body {
            background-image: url("images/grass.png");
        }
        /* 定义风车的位置，并为其添加di 动画函数*/
        .box1 {
            position: absolute;
            left: 353px;
            top: 230px;
            float: left;
            animation: zhuan 4s infinite linear;
        }
        .box2 {
            position: absolute;
            left: 931px;
            top: 618px;
            float: left;
            animation: zhuan 1s infinite linear;
        }
        .box3 {
            position: absolute;
            left: 1259px;
            top: 479px;
            float: left;
            animation: zhuan 2s infinite linear;
        }
    </style>
</head>
<body>
    <div class="box1">
        <img src="images/shan.png" alt="fengche" id="zhuan" width="450px">
    </div>
    <div class="box2">
        <img src="images/shan.png" alt="fengche" id="zhuan" width="200px">
    </div>
    <div class="box3">
        <img src="images/shan.png" alt="fengche" id="zhuan" width="300px">
    </div>
</body>
</html>