html、js、css实现爱心效果
好的！我们可以进一步美化这个爱心效果，增加更多动态和视觉吸引力。以下是改进后的代码，包括以下功能：
1. 背景渐变：添加动态背景渐变效果。
2. 爱心阴影：为爱心添加阴影，使其更具立体感。
3. 随机颜色：点击时随机切换颜色，而不是固定顺序。
4. 文字提示：在爱心下方添加文字提示，告诉用户可以点击切换颜色。
---
### 美化后的代码
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跳动爱心</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
animation: bgAnimation 10s infinite alternate;
}
@keyframes bgAnimation {
0% {
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
}
50% {
background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
}
100% {
background: linear-gradient(135deg, #fbc2eb, #a6c1ee);
}
}
.heart-container {
text-align: center;
}
.heart {
width: 100px;
height: 90px;
position: relative;
animation: beat 1s infinite;
filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.7));
}
.heart::before,
.heart::after {
content: "";
position: absolute;
top: 0;
width: 52px;
height: 80px;
background-color: var(--heart-color, red);
border-radius: 50px 50px 0 0;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
.heart::before {
left: 50px;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart::after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
@keyframes beat {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.text {
margin-top: 20px;
font-size: 18px;
color: #fff;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="heart-container">
<div class="heart" id="heart"></div>
<div class="text">点击爱心切换颜色 ❤️</div>
</div>
<script>
const heart = document.getElementById('heart');
// 随机颜色函数
const getRandomColor = () => {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
};
// 点击切换颜色
heart.addEventListener('click', () => {
const randomColor = getRandomColor();
heart.style.setProperty('--heart-color', randomColor);
});
// 初始化颜色
heart.style.setProperty('--heart-color', getRandomColor());
</script>
</body>
</html>
```
---新增功能说明
1. 背景渐变动画：
- 使用 `linear-gradient` 创建背景渐变效果。
- 通过 `@keyframes` 实现背景颜色的动态变化。
2. 爱心阴影：
- 使用 `filter: drop-shadow()` 为爱心添加阴影，使其更具立体感。
3. 随机颜色切换：
- 点击爱心时，使用 `getRandomColor()` 函数生成随机颜色，并应用到爱心上。
4. 文字提示：
- 在爱心下方添加文字提示，告诉用户可以点击切换颜色。
---
运行效果
1. 打开浏览器，运行代码。
2. 你会看到一个跳动的爱心，背景颜色会动态变化。
3. 点击爱心，颜色会随机切换。
4. 爱心下方会显示提示文字：“点击爱心切换颜色 ❤️”。
---
希望这个美化后的版本能满足你的需求！如果还有其他想法或需要进一步调整，请随时告诉我！ 😊
原文地址：https://blog.csdn.net/qq_63170044/article/details/145210345
免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！