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. 爱心下方会显示提示文字：“点击爱心切换颜色 ❤️”。
---
希望这个美化后的版本能满足你的需求！如果还有其他想法或需要进一步调整，请随时告诉我！ 😊
相关文章：
html、js、css实现爱心效果
好的！我们可以进一步美化这个爱心效果，增加更多动态和视觉吸引力。以下是改进后的代码，包括以下功能： 1. 背景渐变：添加动态背景渐变效果。 2. 爱心阴影：为爱心添加阴影，使其更具立体感。 3. 随…...
【前端】Hexo 建站指南
文章目录 前言生成站点本地测试部署云端参考 前言 更好的阅读体验：https://blog.dwj601.cn/FrontEnd/Hexo/build-your-own-website-with-hexo/ 笔记记多了，想要分享给同学们一起交流进步，该怎么办？想要搭建一个属于自己的知识库…...
OpenStack基础架构
openstack是一套IaaS云的解决方案，是一个开源的云计算管理平台 每一台物理机上都会有一个nova服务器 虚拟化其实是在nova主机里启用的 COW技术： 这么来看，3个物理机上产生10个虚拟机，所以把服务分散到10个虚拟机上和分散到4个虚拟…...
1905电影网中国地区电影数据分析（一） - 数据采集、清洗与存储
文章目录 前言一、数据采集步骤及python库使用版本1. python库使用版本2. 数据采集步骤 二、数据采集网页分析1. 分析采集的字段和URL1.1 分析要爬取的数据字段1.2 分析每部电影的URL1.2 分析每页的URL 2. 字段元素标签定位 三、数据采集代码实现1. 爬取1905电影网分类信息2. 爬…...
IPhone16 Plus 设备详情
目录 产品宣传图内部图——前内部图——后设备详细信息 产品宣传图 内部图——前 内部图——后 设备详细信息 信息收集于HubWeb.cn...
)
埃氏算法C++实现: 快速输出质数( 素数 )
目录 1.简介 算法原理 算法特点 应用场景 2.一般求素数方法 3.埃氏算法求素数 3.1.无动态分配 3.2.有动态分配 1.简介 埃氏算法（Eratosthenes Sieve），全称为埃拉托斯特尼筛法，是一种由古希腊数学家埃拉托斯特尼在公元…...
后端的config包中的常用配置
文章目录 一. CorsConfig二. Knife4jConfig三. MyBatisPlusConfig四. RedisTemplateConfig五. RedissonConfig 一. CorsConfig 全局跨域配置 Configuration public class CorsConfig implements WebMvcConfigurer {Overridepublic void addCorsMappings(CorsRegistry registr…...
基于亿坊PHP框架构建物联网解决方案的优势分析！
在物联网 (IoT) 领域，选到合适的框架对于整个项目的开展也尤为重要。通常情况下，基于PHP的一些主流框架被用户常选择，今天就带大家了解下基于亿坊PHP框架构建物联网解决方案的优势有哪些？ 1、开发效率高 在物联网项目中…...
IoTDB结合Mybatis使用示例(增删查改自定义sql等)
IoTDB时序库是当前越来越流行以及基于其优势各大厂商越来越易接受的国产开源时序数据库，针对IoTDB的内容不做过多介绍，在使用该时序库时，往往有一定入门门槛，不同于关系型数据库或文档型数据库那般方便维护和接入开发，…...
skynet 源码阅读 -- 启动主流程
Skynet 启动主流程分析 Skynet 是一个轻量级、高并发的服务器框架。它在启动时会进行一系列初始化操作，并启动多个不同功能的线程（Monitor、Timer、Worker、Socket），从而实现消息分发、定时器、网络I/O等核心功能。本文主要从 ma…...
OpenCV：高通滤波之索贝尔、沙尔和拉普拉斯
目录 简述 什么是高通滤波？ 高通滤波的概念 应用场景 索贝尔算子 算子公式 实现代码 特点 沙尔算子 算子公式 实现代码 特点 拉普拉斯算子 算子公式 实现代码 特点 高通滤波器的对比与应用场景 相关阅读 OpenCV：图像滤波、卷积与卷积核…...
UDP 广播组播点播的区别及联系
1、网络IP地址的分类 组播地址是分类编址的IPv4地址中的D类地址，又叫多播地址，他的前四位必须是1110，所以网络地址的二进制取值范围是11100000~11101111对应的十进制为 224~~239。所以以224~239开头的网络地址都是组播地址。 组播地址的功能…...
STM32补充——IAP
0 前置知识： FLASH相关内容：前往STM32补充——FLASH STM32三种烧录方式（看看就行）： 1.ISP：In System Programming（在系统编程） 执行芯片厂商的 Bootloader 程序进入 ISP 模式&…...
Jetson Xavier NX (ARM) 使用 PyTorch 安装 Open3D-ML 指南
由于 Jetson 为 ARM64 (aarch64) 的系统架构，所以不能用 pip install 直接安装，需要通过源码编译。 升级系统 JetPack 由于 Open3D-ML 目前只支持 CUDA 10.0 以及 CUDA 11.*，并且 JetPack 的 CUDA 开发环境只有10.2、11.4以及12.2࿰…...
【C++高并发服务器WebServer】-1：Linux中父子进程fork创建及关系、GDB多进程调试
本文目录 一、进程创建二、GDB多进程调试 一、进程创建 在Linux中输入man 2 fork可以查看man文档中的fork的相关函数信息。 fork的作用就是创建一个子进程。 通过fork我们可以知道，创建子进程的时候，复制父进程的信息。 我们看看翻译的man文档信息&am…...
C语言数组详解：从基础到进阶的全面解析
在C语言中，数组是一种基本的数据结构，用于存储多个相同类型的数据。数组的引入使得C语言能够高效地存储和操作大量数据。在任何一个C语言程序中，数组都发挥着极其重要的作用。无论是在算法实现、数据存储、还是在复杂程序的设计中，…...
docker的前世今生
docker来自哪里？ 从我们运维部署的历史来看，宿主机从最初的物理机到虚拟机，再到docker，一步步演进到现在。技术演进其实是为了解决当前技术的痛点，那我们来看看有哪些痛点以及如何克服痛点的。 物理机 一般来说&…...
python实现施瓦茨-克里斯托费尔【全网首个】根据用户输入推测函数
上代码： 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…...
c语言中的数组（上）
数组的概念 数组是⼀组相同类型元素的集合； 数组中存放的是1个或者多个数据，但是数组元素个数不能为0。 数组中存放的多个数据，类型是相同的。 数组分为⼀维数组和多维数组，多维数组⼀般⽐较多⻅的是⼆维数组。 数组创建 在C语言…...
Unity3D仿星露谷物语开发25之创建时钟界面
1、目标 在时钟界面显示当前时钟信息，同时设置特殊按钮可以快速推进时间用于测试。 2、创建GameClock.cs脚本 在Assets -> Scripts -> TimeSystem目录下创建GameClock.cs脚本。 代码如下： using System.Collections; using System.Collections…...
变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析
一、变量声明设计：let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性，这种设计体现了语言的核心哲学。以下是深度解析： 1.1 设计理念剖析 安全优先原则：默认不可变强制开发者明确声明意图 let x 5; …...
AI Agent与Agentic AI：原理、应用、挑战与未来展望
文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例：使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例：使用OpenAI GPT-3进…...
【位运算】消失的两个数字（hard）
消失的两个数字（hard） 题⽬描述：解法（位运算）：Java 算法代码：更简便代码 题⽬链接：⾯试题 17.19. 消失的两个数字 题⽬描述： 给定⼀个数组，包含从 1 到 N 所有…...
macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台（Launchpad）多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显，都是Google家的办公全家桶。这些应用并不是通过独立安装的…...
vue3 定时器-定义全局方法 vue+ts
1.创建ts文件 路径：src/utils/timer.ts 完整代码： import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...
听写流程自动化实践，轻量级教育辅助
随着智能教育工具的发展，越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式，也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建，…...
【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)
前言： 双亲委派机制对于面试这块来说非常重要，在实际开发中也是经常遇见需要打破双亲委派的需求，今天我们一起来探索一下什么是双亲委派机制，在此之前我们先介绍一下类的加载器。 目录 编辑 前言： 类加载器 1. …...
windows系统MySQL安装文档
概览：本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容，为学习者提供全面的操作指导。关键要点包括： 解压 ：下载完成后解压压缩包，得到MySQL 8.…...
Python 训练营打卡 Day 47
注意力热力图可视化 在day 46代码的基础上，对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...
LLaMA-Factory 微调 Qwen2-VL 进行人脸情感识别（二）
在上一篇文章中，我们详细介绍了如何使用LLaMA-Factory框架对Qwen2-VL大模型进行微调，以实现人脸情感识别的功能。本篇文章将聚焦于微调完成后，如何调用这个模型进行人脸情感识别的具体代码实现，包括详细的步骤和注释。 模型调用步骤 环境准备：确保安装了必要的Python库。…...