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

html、js、css实现爱心效果

news 2025/11/5 21:55:59

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

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

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/8/19 23:46:57

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

编程新知 2025/10/30 16:33:16

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1）　にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために　＆　ように（３）そう（４）にする3、…...

编程新知 2025/10/29 10:05:16

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

编程新知 2025/9/30 14:27:04

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

编程新知 2025/10/29 23:20:27

基于Uniapp开发HarmonyOS 5.0旅游应用技术实践

一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架&#xff0c;支持"一次开发&#xff0c;多端部署"&#xff0c;可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务&#xff0c;为旅游应用带来&#xf…...

编程新知 2025/10/3 22:08:23

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/10/19 8:14:08

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/10/2 6:08:50

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

编程新知 2025/7/18 1:50:27

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

编程新知 2025/10/17 17:04:15