效果
代码
<!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. 添加多几条小鱼,给不同的小鱼设置不同的动画参数即可
-->