首页html哆啦a梦动态代码

html哆啦a梦动态代码

时间: 2023-11-14 10:07:01 浏览: 92

以下是一个简单的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梦的图片，并且图片会以一定的速度在页面内来回移动，同时还会有轻微的旋转动画。你可以将图片链接换成自己喜欢的图片地址，也可以调整动画效果来实现自己想要的效果。

阅读全文