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

超简单的跳动爱心

1. css实现方式

<body><div class="heart"></div>
</body>
<style>body { display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #ffe6f2;margin: 0;}.heart {position: relative;width: 100px;height: 90px;animation: heartbeat 1.2s infinite;}.heart:before,.heart:after {position: absolute;content: "";left: 50px;top: 0;width: 50px;height: 80px;background: #ff66a3;border-radius: 50px 50px 0 0;transform: rotate(-45deg);transform-origin: 0 100%;}.heart:after {left: 0;transform: rotate(45deg);transform-origin: 100% 100%;}@keyframes heartbeat {0% {transform: scale(1);}50% {transform: scale(1.2);}100% {transform: scale(1);}}</style>

2. canvas实现方式

<body>
<canvas id="heartCanvas" width="300" height="300"></canvas>
</body><style>
body {display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #ffe6f2;margin: 0;}canvas {border: 1px solid #ddd;background-color: white;}
</style>
<script>const canvas = document.getElementById('heartCanvas');const ctx = canvas.getContext('2d');let scale = 1;let direction = 1;function drawHeart(scale) {ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.beginPath();ctx.fillStyle = '#ff66a3';// 绘制心形const centerX = canvas.width / 2;const centerY = canvas.height / 2;const size = 80 * scale;ctx.moveTo(centerX, centerY);for (let i = 0; i < Math.PI * 2; i += 0.01) {const x = centerX + size * (16 * Math.pow(Math.sin(i), 3)) / 16;const y = centerY - size * (13 * Math.cos(i) - 5 * Math.cos(2*i) - 2 * Math.cos(3*i) - Math.cos(4*i)) / 16;ctx.lineTo(x, y);}ctx.closePath();ctx.fill();}function animate() {scale += direction * 0.02;if (scale > 1.2) {direction = -1;} else if (scale < 1) {direction = 1;}drawHeart(scale);requestAnimationFrame(animate);}animate();</script>
http://www.lryc.cn/news/606533.html

相关文章:

  • 【SpringMVC】拦截器,实现小型登录验证
  • 逻辑回归——银行贷款案例分析
  • Lomsat gelral 树上启发式合并
  • Coze是什么?能做什么?
  • Dify插件安装失败,一直处于安装状态?
  • 【智能体agent】入门之--1.初体验
  • OpenCV学习day2
  • RabbitMQ的特点和消息可靠性保障
  • 【neo4j】跨版本升级数据库
  • 《Java 程序设计》第 14 章 - JavaFX 基础
  • MySQL 8.0 OCP 1Z0-908 题目解析(42)
  • 企业级部署 (基于tomcat与nginx)
  • Linux和shell
  • 【运维基础】Linux 文件系统基本管理
  • Side band ECC、Inline ECC、On-die ECC、Link ECC
  • chrome.storage 和 localStorage
  • Android 基础入门学习目录(持续更新)
  • kettle插件-kettle http client plus插件,轻松解决https接口无法调用文件流下载问题
  • 面试笔记【16:9区域问题】
  • SQL注入SQLi-LABS 靶场less25a-28a详细通关攻略
  • ESP32 外设驱动开发指南 (ESP-IDF框架)——GPIO篇:基础配置、外部中断与PWM(LEDC模块)应用
  • 机械学习--逻辑回归
  • 第1章:基础篇——第1节:基础操作与认识界面
  • Vercel 全面介绍与网站部署指南
  • 老旧远程控制管理模块(物联网设备)渗透实战:SNMP泄露+内核提权攻击链深度解析
  • Gold 序列
  • 7月31号打卡
  • nvm安装nodejs后提示No installations recognized
  • 爱普生002墨水与004墨水基本参数及支持机型
  • pyspark使用