CSS3动画(animation) 捕鱼达人之无限摆动游泳的鱼 案例
程序员文章站
2024-03-25 12:33:34
...
本案例下载地址>>>点击打开链接
效果:
代码:
<!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>鱼</title>
<style>
.fish {
width: 174px;
height: 126px;
background: url('./imgs/fish.png') 0px 0px no-repeat;
animation: shark 1s infinite steps(11) , swim 10s linear infinite;
}
/* 摆动身体 */
@keyframes shark {
100% {
background-position: 0px -1386px;
}
}
/* 游动 */
@keyframes swim {
30% {
transform: translate(1000px,0) rotate(0deg);
}
50% {
transform: translate(1000px,0) rotate(180deg);
}
80% {
transform: translate(0,0) rotate(180deg);
}
}
</style>
</head>
<body>
<!-- 因为鱼是长图,实现的原理是在div盒子内不断切换Y轴坐标实现鱼'动'起来 -->
<div class="fish"></div>
<div class="fish"></div>
</body>
</html>上一篇： 模拟抛物线
下一篇： CSS3 动画 animation（二）