十一、捕鱼达人的鱼儿游泳动画

最新推荐文章于 2022-03-19 19:35:48 发布

蕙惠子

最新推荐文章于 2022-03-19 19:35:48 发布

阅读量1.3k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_40976555/article/details/80157606

版权

前端专栏收录该内容

53 篇文章 2 订阅

订阅专栏

一、思路分析

1.鱼儿自身的鱼尾摆动：

设计一个包含鱼尾摆动每一帧动画的长图，通过除css3动画来控制每一帧图片的切换，(将图片定义为背景图片，改变背景图片位置)这样就可以形成鱼尾摆动的视觉效果；

知识点：创建自定义动画@keyframes

语法：第一种 @keyframes 动画名称{

from{ }

to{ }

}

第二种 @keyframes 动画名称{

0%{ }

....

100%{ }

}

给元素绑定创建的自定义动画animation

语法：animation:动画名称执行时间运动方式延时播放次数是否反向；

另外animation还有一个属性steps()可以进行动画/过渡分割，有两个参数：第一个参数是一个正值，指定动画分割的段数。第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。start 第一帧是动画结束的时候状态； end 第一帧是动画开始的时候状态；

2.鱼儿的游动轨迹

给鱼包一个外部的框，让鱼儿在框内部摆动，这个框完成移动的动画，形成鱼儿游动的动画；

方法：第一种：animation绑定的自定义动画

第二种：transform移动动画搭配过渡transition属性

二、具体代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>小鱼游泳</title>
    <style>
        body,html{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .move{
            width: 600px;
            height: 300px;
            animation: move 20s linear infinite;
        }
        /*鱼移动动画*/
        @keyframes move {
            from{
                margin-left: -600px;
                margin-top: 0px;
            }
            to{
                margin-left:2000px;
                margin-top: 500px;
            }
        }
        .shack{
            width: 550px;
            height: 250px;
            background: url("./img/shark1.png") no-repeat;
            animation: shift 1s  steps(8) infinite;
            /*steps()指的是帧间隔时间每一帧动画间隔的时间*/
        }
        /*鱼尾摆动动画*/
        @keyframes shift {
            from{
                background-position: left 0;
            }
            to{
                background-position: left -2160px;
            }
        }
    </style>
</head>
<body>
<div class="move">
    <div class="shack"></div>
</div>
</body>
</html>