首页会动的hellokitty源代码html

会动的hellokitty源代码html

时间: 2023-10-21 11:02:27 浏览: 335

以下是一个简单的会动的Hello Kitty源代码HTML： ```html <!DOCTYPE html> <html> <head> <style> #hellokitty { position: relative; animation: movekitty 2s infinite; } @keyframes movekitty { 0% { left: 0; } 50% { left: 50%; } 100% { left: 0; } } </style> </head> <body> <div id="hellokitty"> <img src="hellokitty.gif" alt="Hello Kitty"> </div> </body> </html> ``` 以上代码首先在`<head>`标签内定义了一个CSS样式，设置了一个ID为`hellokitty`的元素，并使用`position: relative;`属性使其相对位置生效。并通过`animation`属性将动画应用到该元素上，动画名称为`movekitty`，持续时间为2秒，重复无限次。在代码中使用了`@keyframes`来定义动画的关键帧，起始位置为0%，结束位置为100%。在50%的时候Hello Kitty会向右移动到屏幕的50%位置，再在100%的时候Hello Kitty会回到初始位置。这样就形成了左右移动的效果。在`<body>`标签内，将会动的Hello Kitty放入一个`<div>`元素中，并通过`<img>`标签引入了Hello Kitty的图片。图片地址为`hellokitty.gif`。以上代码实现了一个简单的会动的Hello Kitty效果。

阅读全文