css动画效果（旋转+动画）

最新推荐文章于 2024-07-29 14:14:21 发布

w_qianqian

最新推荐文章于 2024-07-29 14:14:21 发布

阅读量1.6k

点赞数

分类专栏：前端 html+css 文章标签： css css3 html animation

本文链接：https://blog.csdn.net/w_mengying/article/details/105899650

版权

前端 html+css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

小编先来简单介绍一下这篇文章主要实现的效果，客位看官，看好喽~
本文采用css动画和rotate实现一款平面上的2D翅膀原地飞的小玩意儿，，有兴趣的可以继续往下看看。

飞翔的翅膀（平面的哦~）

接下来轮到代码段了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>飞翔的翅膀</title>
    <style>
        /*翅膀和内容样式，可删减*/
        html {
            background-color: pink;
        }
        .content {
            width: 13%;
            margin: 200px auto;
        }
        .girl-fly1,
        .girl-fly2 {
           width: 40%;
        }
        .girl-fly1 {
            float: left;
        }
        .girl-fly2 {
            float: right;
        }
        .girl-fly1 img {
            width: 100%;
            animation: flyl 2s ease 0s infinite alternate;
        }
        .girl-fly2 img{
            width: 100%;
            animation: fly2 2s ease 0s infinite alternate;
        }
        /*下面是两个翅膀的动画效果*/
        @keyframes flyl  {
            0% {
                transform-origin: right 50%;
                transform: rotate(30deg);
            }
            25% {
                /*transform-origin: right 50%;
                transform: rotate(0deg);*/
            }
            50% {
                transform-origin: right 50%;
                transform: rotate(-30deg);
            }
            75% {
                /*transform-origin: right 50%;
                transform: rotate(-30deg);*/
            }
            
            100% {
                transform-origin: right 50%;
                transform: rotate(30deg);
            }
        }
        @keyframes fly2  {
            0% {
                transform-origin: left 50%;
                transform: rotate(-30deg);
            }
            25% {
                /*transform-origin: right 50%;
                transform: rotate(0deg);*/
            }
            50% {
                transform-origin: left 50%;
                transform: rotate(30deg);
            }
            75% {
                /*transform-origin: right 50%;
                transform: rotate(-30deg);*/
            }
            100% {
                transform-origin: left 50%;
                transform: rotate(-30deg);
            }
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="girl-fly1"><img src="img/index/fly1.png" alt="fly"></div>
        <div class="girl-fly2"><img src="img/index/fly2.png" alt="fly"></div>
    </div>
    
</body>
</html>