html哆啦a梦动态代码
时间: 2023-11-14 14:07:01 浏览: 99
CSS画出一个可爱神奇的多啦A梦
以下是一个简单的HTML哆啦A梦动态代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>哆啦A梦动态代码</title>
<style>
#doraemon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: moveDoraemon 2s ease-in-out infinite alternate;
}
@keyframes moveDoraemon {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
50% {
transform: translate(-50%, -50%) rotate(-10deg);
}
100% {
transform: translate(-50%, -50%) rotate(0deg);
}
}
</style>
</head>
<body>
<img id="doraemon" src="https://cdn.jsdelivr.net/gh/ChrisLee0211/CDN/img/doraemon.png" alt="哆啦A梦">
</body>
</html>
```
这段代码会在页面中显示一个哆啦A梦的图片,并且图片会以一定的速度在页面内来回移动,同时还会有轻微的旋转动画。你可以将图片链接换成自己喜欢的图片地址,也可以调整动画效果来实现自己想要的效果。
阅读全文