当前位置: 首页 > news >正文

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. 爱心下方会显示提示文字:“点击爱心切换颜色 ❤️”。

---

希望这个美化后的版本能满足你的需求!如果还有其他想法或需要进一步调整,请随时告诉我! 😊

http://www.lryc.cn/news/525552.html

相关文章:

  • 【前端】Hexo 建站指南
  • OpenStack基础架构
  • 1905电影网中国地区电影数据分析(一) - 数据采集、清洗与存储
  • IPhone16 Plus 设备详情
  • 埃氏算法C++实现: 快速输出质数( 素数 )
  • 后端的config包中的常用配置
  • 基于亿坊PHP框架构建物联网解决方案的优势分析!
  • IoTDB结合Mybatis使用示例(增删查改自定义sql等)
  • skynet 源码阅读 -- 启动主流程
  • OpenCV:高通滤波之索贝尔、沙尔和拉普拉斯
  • UDP 广播组播点播的区别及联系
  • STM32补充——IAP
  • Jetson Xavier NX (ARM) 使用 PyTorch 安装 Open3D-ML 指南
  • 【C++高并发服务器WebServer】-1:Linux中父子进程fork创建及关系、GDB多进程调试
  • C语言数组详解:从基础到进阶的全面解析
  • docker的前世今生
  • python实现施瓦茨-克里斯托费尔【全网首个】根据用户输入推测函数
  • c语言中的数组(上)
  • Unity3D仿星露谷物语开发25之创建时钟界面
  • 数据结构测试题1
  • android wifi AsyncChannel(WifiManager和WifiP2pManager)
  • 【Image Captioning】DynRefer
  • Midjourney基础-常用修饰词+权重的用法大全
  • 没有屋檐的房子-023粪堆旁边的舞蹈
  • 基于Docker的Kafka分布式集群
  • 【博客之星】年度总结:在云影与墨香中探寻成长的足迹
  • SpringBoot的Swagger配置
  • machine learning knn算法之使用KNN对鸢尾花数据集进行分类
  • C语言练习(16)
  • SOAFEE 技术研讨会:汽车软件定义与自动驾驶技术探讨