用前端代码实现一个锦鲤
时间: 2023-12-03 10:47:05 浏览: 39
以下是一个简单的实现锦鲤的前端代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>锦鲤</title>
<style>
body {
background-color: #F7F7F7;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.koi {
width: 200px;
height: 100px;
position: relative;
}
.koi .body {
width: 150px;
height: 100px;
background-color: #FFC300;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
position: absolute;
top: 0;
left: 25px;
transform-origin: center right;
animation: swim 2s ease-in-out infinite;
}
.koi .tail {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid #FFC300;
border-bottom: 50px solid transparent;
position: absolute;
top: 25px;
left: -50px;
transform-origin: center right;
animation: swish 2s ease-in-out infinite;
}
.koi .head {
width: 50px;
height: 50px;
background-color: #FFC300;
border-radius: 50%;
position: absolute;
top: 25px;
left: 130px;
transform-origin: center left;
animation: nod 2s ease-in-out infinite;
}
.koi .eye {
width: 20px;
height: 20px;
background-color: white;
border-radius: 50%;
position: absolute;
top: 10px;
left: 120px;
transform-origin: center;
animation: blink 2s ease-in-out infinite;
}
.koi .eye::before {
content: "";
display: block;
width: 10px;
height: 10px;
background-color: black;
border-radius: 50%;
position: absolute;
top: 5px;
left: 5px;
}
@keyframes swim {
0% {
transform: rotate(0);
}
50% {
transform: rotate(30deg);
}
100% {
transform: rotate(0);
}
}
@keyframes swish {
0% {
transform: rotate(0);
}
50% {
transform: rotate(10deg);
}
100% {
transform: rotate(0);
}
}
@keyframes nod {
0% {
transform: rotate(0);
}
50% {
transform: rotate(10deg);
}
100% {
transform: rotate(0);
}
}
@keyframes blink {
0%, 50%, 100% {
transform: scale(1);
}
25%, 75% {
transform: scale(0.5);
}
}
</style>
</head>
<body>
<div class="koi">
<div class="tail"></div>
<div class="body"></div>
<div class="head">
<div class="eye"></div>
</div>
</div>
</body>
</html>
```
这段代码使用了 HTML 和 CSS 实现了一个简单的锦鲤动画。在浏览器中打开这个 HTML 文件,你就可以看到一个游动的锦鲤了。