用html语言写一个动态爱心页面
时间: 2024-09-15 19:05:31 浏览: 42
HTML心形动态满屏爱心代码
5星 · 资源好评率100%
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>
阅读全文