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

最新推荐文章于 2024-07-22 19:12:50 发布

w_qianqian

最新推荐文章于 2024-07-22 19:12:50 发布

阅读量1.5k

点赞数

分类专栏：前端 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>

这个里面是有一个小小的坑

1.在动画制作过程中，为保证动画的连贯性，尽可能为动画设定少一点的帧数，防止卡顿。
2.在制作效果的时候，注意初始的状态，要一致，否则可能出现一些比较有趣的效果，有兴趣的话可以试试哦~~~~
3.动画效果要直接设在需要动的盒子里。

w_qianqian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css动画效果（旋转+动画）

css旋转（动起来吧 ~ ~ ~ ~ ）欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：...
复制链接

扫一扫

专栏目录