写一个俯视小鱼在游动的html
<!DOCTYPE html>
<html>
<head>
<title>俯视小鱼在游动</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #4a90e2;
}
#fish {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 50px;
background-color: #f90;
border-radius: 50px 50px 0 0;
animation: swim 2s infinite;
animation-timing-function: ease-in-out;
transform-origin: center bottom;
}
#fish::before {
content: '';
position: absolute;
top: -20px;
left: 30px;
width: 40px;
height: 40px;
background-color: #f90;
border-radius: 50%;
animation: wiggle 2s infinite;
animation-timing-function: ease-in-out;
}
#fish::after {
content: '';
position: absolute;
top: 10px;
left: 80px;
width: 20px;
height: 20px;
background-color: #f90;
border-radius: 50%;
animation: wiggle 2s infinite;
animation-timing-function: ease-in-out;
}
@keyframes swim {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
25% {
transform: translate(-50%, -50%) rotate(20deg);
}
50% {
transform: translate(-50%, -50%) rotate(0deg);
}
75% {
transform: translate(-50%, -50%) rotate(-20deg);
}
100% {
transform: translate(-50%, -50%) rotate(0deg);
}
}
@keyframes wiggle {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(20deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(-20deg);
}
100% {
transform: rotate(0deg);
}
}
</style>
</head>
<body>
<div id="fish"></div>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/0k9 著作权归作者所有。请勿转载和采集!