用html做一个会动的狗狗心电图
时间: 2023-12-22 12:06:13 浏览: 2
用代码写跳动的心的html网页
好的,以下是一个简单的示例代码,实现了一个会动的狗狗心电图:
```html
<!DOCTYPE html>
<html>
<head>
<title>Dog ECG Animation</title>
<style>
.container {
position: relative;
width: 500px;
height: 200px;
border: 1px solid black;
margin: 0 auto;
overflow: hidden;
}
.ecg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform-origin: left center;
animation: ecg 2s linear infinite;
background-color: #f5d2c2;
}
@keyframes ecg {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
.dog {
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scaleX(-1);
background-image: url('https://image.flaticon.com/icons/png/512/138/138568.png');
background-size: cover;
animation: dog 2s linear infinite;
}
@keyframes dog {
from {
transform: translate(-50%, -50%) scaleX(-1);
}
to {
transform: translate(-50%, -50%) scaleX(1);
}
}
</style>
</head>
<body>
<div class="container">
<div class="ecg"></div>
<div class="dog"></div>
</div>
</body>
</html>
```
该示例代码中,使用了两个 `div` 元素分别表示心电图和狗狗的动画效果,通过 CSS 中的 `animation` 属性实现动画效果。其中,心电图的动画使用了 `transform` 属性的 `scaleX` 值来改变元素的水平缩放比例,从而实现心电图的波动效果;狗狗的动画使用了 `transform` 属性的 `translate` 值和 `scaleX` 值来改变元素的位置和水平翻转,从而实现狗狗的摆动效果。
你可以将该代码保存为一个 `.html` 文件并在浏览器中打开,即可看到会动的狗狗心电图。当然,你也可以根据需要对该代码进行改进和扩展。
阅读全文