首页用html语言写一个动态爱心页面

用html语言写一个动态爱心页面

时间: 2024-09-15 08:05:31 浏览: 39

HTML本身并不支持动态效果，但它可以配合CSS和JavaScript来创建一些基本的交互和视觉变化，比如简单的爱心动态显示。下面是一个静态HTML示例，展示了一个简单的鼠标悬停时会改变颜色的心形元素。如果想实现更复杂的动态效果，你可能会需要结合其他技术如jQuery或Vue.js。 ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>动态爱心</title> <style> .heart { width: 100px; height: 100px; background-color: red; position: relative; transform: rotate(45deg); transition: background-color 0.5s; } .heart:before, .heart:after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; width: 70%; height: 70%; } .heart:before { background-color: white; transform: rotate(45deg) skewX(-45deg); } .heart:hover { background-color: pink; } </style> </head> <body> <div class="heart"></div> </body> </html>

阅读全文