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

html、js、css实现爱心效果

news 2025/12/21 9:38:57

好的！我们可以进一步美化这个爱心效果，增加更多动态和视觉吸引力。以下是改进后的代码，包括以下功能：

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

---

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

相关文章：

html、js、css实现爱心效果

好的&#xff01;我们可以进一步美化这个爱心效果&#xff0c;增加更多动态和视觉吸引力。以下是改进后的代码&#xff0c;包括以下功能&#xff1a; 1. 背景渐变&#xff1a;添加动态背景渐变效果。 2. 爱心阴影&#xff1a;为爱心添加阴影&#xff0c;使其更具立体感。 3. 随…...

编程日记 2025/1/24 14:07:14

【前端】Hexo 建站指南

文章目录 前言生成站点本地测试部署云端参考 前言 更好的阅读体验&#xff1a;https://blog.dwj601.cn/FrontEnd/Hexo/build-your-own-website-with-hexo/ 笔记记多了&#xff0c;想要分享给同学们一起交流进步&#xff0c;该怎么办&#xff1f;想要搭建一个属于自己的知识库…...

编程日记 2025/1/24 14:06:13

OpenStack基础架构

openstack是一套IaaS云的解决方案&#xff0c;是一个开源的云计算管理平台 每一台物理机上都会有一个nova服务器 虚拟化其实是在nova主机里启用的 COW技术&#xff1a; 这么来看&#xff0c;3个物理机上产生10个虚拟机&#xff0c;所以把服务分散到10个虚拟机上和分散到4个虚拟…...

编程日记 2025/1/24 14:05:10

1905电影网中国地区电影数据分析（一） - 数据采集、清洗与存储

文章目录 前言一、数据采集步骤及python库使用版本1. python库使用版本2. 数据采集步骤 二、数据采集网页分析1. 分析采集的字段和URL1.1 分析要爬取的数据字段1.2 分析每部电影的URL1.2 分析每页的URL 2. 字段元素标签定位 三、数据采集代码实现1. 爬取1905电影网分类信息2. 爬…...

编程日记 2025/1/24 14:04:09

IPhone16 Plus 设备详情

目录 产品宣传图内部图——前内部图——后设备详细信息 产品宣传图 内部图——前 内部图——后 设备详细信息 信息收集于HubWeb.cn...

编程日记 2025/1/24 14:03:08

埃氏算法C++实现: 快速输出质数( 素数 )

目录 1.简介 算法原理 算法特点 应用场景 2.一般求素数方法 3.埃氏算法求素数 3.1.无动态分配 3.2.有动态分配 1.简介 ‌埃氏算法&#xff08;Eratosthenes Sieve&#xff09;‌&#xff0c;全称为埃拉托斯特尼筛法&#xff0c;是一种由古希腊数学家埃拉托斯特尼在公元…...

编程日记 2025/1/24 14:02:07

后端的config包中的常用配置

文章目录 一. CorsConfig二. Knife4jConfig三. MyBatisPlusConfig四. RedisTemplateConfig五. RedissonConfig 一. CorsConfig 全局跨域配置 Configuration public class CorsConfig implements WebMvcConfigurer {Overridepublic void addCorsMappings(CorsRegistry registr…...

编程日记 2025/1/24 14:01:06

基于亿坊PHP框架构建物联网解决方案的优势分析！

在物联网 (IoT) 领域&#xff0c;选到合适的框架对于整个项目的开展也尤为重要。通常情况下&#xff0c;基于PHP的一些主流框架被用户常选择&#xff0c;今天就带大家了解下基于亿坊PHP框架构建物联网解决方案的优势有哪些&#xff1f; 1、开发效率高 在物联网项目中&#xf…...

编程日记 2025/1/24 13:55:00

IoTDB结合Mybatis使用示例(增删查改自定义sql等)

IoTDB时序库是当前越来越流行以及基于其优势各大厂商越来越易接受的国产开源时序数据库&#xff0c;针对IoTDB的内容不做过多介绍&#xff0c;在使用该时序库时&#xff0c;往往有一定入门门槛&#xff0c;不同于关系型数据库或文档型数据库那般方便维护和接入开发&#xff0c;…...

编程日记 2025/1/24 13:53:59

skynet 源码阅读 -- 启动主流程

Skynet 启动主流程分析 Skynet 是一个轻量级、高并发的服务器框架。它在启动时会进行一系列初始化操作&#xff0c;并启动多个不同功能的线程&#xff08;Monitor、Timer、Worker、Socket&#xff09;&#xff0c;从而实现消息分发、定时器、网络I/O等核心功能。本文主要从 ma…...

编程日记 2025/1/24 13:52:57

OpenCV：高通滤波之索贝尔、沙尔和拉普拉斯

目录 简述 什么是高通滤波&#xff1f; 高通滤波的概念 应用场景 索贝尔算子 算子公式 实现代码 特点 沙尔算子 算子公式 实现代码 特点 拉普拉斯算子 算子公式 实现代码 特点 高通滤波器的对比与应用场景 相关阅读 OpenCV&#xff1a;图像滤波、卷积与卷积核…...

编程日记 2025/1/24 13:50:55

UDP 广播组播点播的区别及联系

1、网络IP地址的分类 组播地址是分类编址的IPv4地址中的D类地址&#xff0c;又叫多播地址&#xff0c;他的前四位必须是1110&#xff0c;所以网络地址的二进制取值范围是11100000~11101111对应的十进制为 224~~239。所以以224~239开头的网络地址都是组播地址。 组播地址的功能…...

编程日记 2025/1/24 13:49:54

STM32补充——IAP

0 前置知识&#xff1a; FLASH相关内容&#xff1a;前往STM32补充——FLASH STM32三种烧录方式&#xff08;看看就行&#xff09;&#xff1a; 1.ISP&#xff1a;In System Programming&#xff08;在系统编程&#xff09; 执行芯片厂商的 Bootloader 程序进入 ISP 模式&…...

编程日记 2025/1/24 13:48:52

Jetson Xavier NX (ARM) 使用 PyTorch 安装 Open3D-ML 指南

由于 Jetson 为 ARM64 (aarch64) 的系统架构&#xff0c;所以不能用 pip install 直接安装&#xff0c;需要通过源码编译。 升级系统 JetPack 由于 Open3D-ML 目前只支持 CUDA 10.0 以及 CUDA 11.*&#xff0c;并且 JetPack 的 CUDA 开发环境只有10.2、11.4以及12.2&#xff0…...

编程日记 2025/1/24 13:45:49

【C++高并发服务器WebServer】-1：Linux中父子进程fork创建及关系、GDB多进程调试

本文目录 一、进程创建二、GDB多进程调试 一、进程创建 在Linux中输入man 2 fork可以查看man文档中的fork的相关函数信息。 fork的作用就是创建一个子进程。 通过fork我们可以知道&#xff0c;创建子进程的时候&#xff0c;复制父进程的信息。 我们看看翻译的man文档信息&am…...

编程日记 2025/1/24 13:37:40

C语言数组详解：从基础到进阶的全面解析

在C语言中&#xff0c;数组是一种基本的数据结构&#xff0c;用于存储多个相同类型的数据。数组的引入使得C语言能够高效地存储和操作大量数据。在任何一个C语言程序中&#xff0c;数组都发挥着极其重要的作用。无论是在算法实现、数据存储、还是在复杂程序的设计中&#xff0c…...

编程日记 2025/1/24 13:34:34

docker的前世今生

docker来自哪里&#xff1f; 从我们运维部署的历史来看&#xff0c;宿主机从最初的物理机到虚拟机&#xff0c;再到docker&#xff0c;一步步演进到现在。技术演进其实是为了解决当前技术的痛点&#xff0c;那我们来看看有哪些痛点以及如何克服痛点的。 物理机 一般来说&…...

编程日记 2025/1/24 13:30:29

python实现施瓦茨-克里斯托费尔【全网首个】根据用户输入推测函数

上代码&#xff1a; from sympy import symbols, integrate, simplify from sympy.plotting import plotn int(input("n:")) if n < 2:print("Error: Must n > 2") i 0 a [] aef [] A [] x, y symbols(x y) z, w symbols(z w)while i < n…...

编程日记 2025/1/24 13:28:26

c语言中的数组（上）

数组的概念 数组是⼀组相同类型元素的集合&#xff1b; 数组中存放的是1个或者多个数据&#xff0c;但是数组元素个数不能为0。 数组中存放的多个数据&#xff0c;类型是相同的。 数组分为⼀维数组和多维数组&#xff0c;多维数组⼀般⽐较多⻅的是⼆维数组。 数组创建 在C语言…...

编程日记 2025/1/24 13:27:25

Unity3D仿星露谷物语开发25之创建时钟界面

1、目标 在时钟界面显示当前时钟信息&#xff0c;同时设置特殊按钮可以快速推进时间用于测试。 2、创建GameClock.cs脚本 在Assets -> Scripts -> TimeSystem目录下创建GameClock.cs脚本。 代码如下&#xff1a; using System.Collections; using System.Collections…...

编程日记 2025/1/24 13:25:18

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

编程新知 2025/9/15 5:56:53

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

编程新知 2025/12/14 11:45:25

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

编程新知 2025/10/24 9:13:44

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

编程新知 2025/11/18 8:33:43

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

编程新知 2025/12/20 1:33:28

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

编程新知 2025/11/29 21:26:48

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

编程新知 2025/10/6 18:46:56

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

编程新知 2025/10/15 0:25:46

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/12/12 8:42:24

【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

编程新知 2025/12/19 22:52:31