css3 简单的动画实现欢乐愉快的小鱼

最新推荐文章于 2022-04-28 12:57:32 发布

每天努力搬砖

最新推荐文章于 2022-04-28 12:57:32 发布

阅读量1.4k

点赞数 2

本文链接：https://blog.csdn.net/txw0415/article/details/80445130

版权

效果

代码

<!DOCTYPE html>
<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>
        * {
            margin: 0;
            padding: 0;
            background-color: skyblue;
        }

        .fish {
            width: 174px;
            height: 126px;
            background: url("./fish.png") 0px 0px no-repeat;

        }

        .fish:nth-child(1) {
            /* 动画属性 动画名 执行时间  次数无限循环 指定步数, 动画名 执行时间 线性过渡 无限循环; */
            animation: swim 1s infinite steps(11), run 7s linear infinite;
        }

        .fish:nth-child(2) {
            animation: swim 2s infinite steps(11), run 4s linear infinite;
        }

        .fish:nth-child(3) {
            animation: swim 1.2s infinite steps(11), run 6.3s linear infinite;
        }

        .fish:nth-child(4) {
            animation: swim 0.8s infinite steps(11), run 7.5s linear infinite;
        }

        .fish:nth-child(5) {
            animation: swim 1.5s infinite steps(11), run 6.7s linear infinite;
        }
        /* 动画声明   名字 */
        @keyframes swim {
            100% {
                background-position: 0px -1386px;
            }
        }

        @keyframes run {
            40% {
                transform: translate(1000px, 0px);
            }

            60% {
                transform: translate(1000px, 0px) rotate(-180deg);
            }

            80% {
                transform: translate(0px, 0px) rotate(-180deg);
            }
        }
    </style>
</head>
<body>
    <div class="fish"></div>
    <div class="fish"></div>
    <div class="fish"></div>
    <div class="fish"></div>
    <div class="fish"></div>

</body>
</html>

<!-- 
    1. 先实现一条小鱼抖动尾巴（原理其实就是使用动画改变 background-position, steps）
    2. 实现一条鱼的游动（找到关键节点 40%， 60%， 80%）， 要知道关键节点小鱼的transform参数值
    3. 添加多几条小鱼，给不同的小鱼设置不同的动画参数即可
 -->

每天努力搬砖

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
css3 简单的动画实现欢乐愉快的小鱼

效果代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
复制链接

扫一扫