用html写一个爱心

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>爱您</title><style>* {padding: 0;margin: 0;}body {background-color: pink;}#frame {position: relative;width: 400px;height: 300px;margin: 200px auto;}.left,.right {top: 0;width: 200px;height: 200px;border-radius: 50%;}.left {left: 35px;}.right {right: 35px;z-index: -1;}.bottom {bottom: 36px;left: 100px;width: 200px;height: 200px;transform: rotate(45deg);z-index: -1;}.heart {position: absolute;box-shadow: 0 0 40px #d5093c;animation: beat 0.8s ease infinite normal;background: linear-gradient(-90deg, #f50a45 0%, #d5093c 40%);}@keyframes beat {0% {transform: scale(1) rotate(225deg);box-shadow: 0 0 40px #d5093c;}50% {transform: scale(1.1) rotate(225deg);box-shadow: 0 0 70px #d5093c;}100% {transform: scale(1) rotate(225deg);box-shadow: 0 0 40px #d5093c;}}@keyframes a {0% {transform: scale(1) rotate(0deg);}50% {transform: scale(1.1) rotate(0deg);}100% {transform: scale(1) rotate(0deg);}}#z {width: 90px;margin: -23% 30%;position: absolute;animation: a 0.8s ease infinite normal;}#w {width: 90px;margin: -23% 67%;position: absolute;animation: a 0.8s ease infinite normal;}#con {width: 20px;margin: -7% 49.5%;position: absolute;animation: a 0.8s ease infinite normal;}</style></head><body><div id="frame"><div class="heart left"></div><div class="heart right"></div><div class="heart bottom"></div></div><div id="z"><h2>胡歌</h2></div><div id="w"><h2>未知</h2></div><!-- <div id="con"><h1>字里行间,全都是你。</h1></div> --><script type="text/javascript">var btn = document.getElementById('frame')//   双击事件btn.ondblclick = function () {// window.location.href = 'http://www.kim-shift.cn'window.open('http://www.kim-shift.cn')}</script></body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/794519.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【软件测试】测试常见知识点汇总

测试常见知识点汇总 一、什么是测试1.1 测试和调试的区别1.2 什么是需求1.2.1 用户需求1.2.2 软件需求 1.3 测试用例要素1.4 软件的生命周期及各阶段概述1.5 开发模型和测试模型&#xff08;记住特点和适用场景&#xff09;1.5.1 开发模型1.5.1.1 瀑布模型&#xff08;自上而下…

WebKit结构详细简介

第一章:WebKit概述 WebKit是一个开源的网页浏览引擎,最初由苹果公司为其Safari浏览器开发,后来成为了多个浏览器的基础,包括苹果的Safari、Google的Chrome、微软的Edge等。它不仅在桌面端有着广泛的应用,还被广泛地应用于移动端的浏览器中,如iOS和Android系统。WebKit的…

vue3+element-plus(el-carousel)实现图片轮播和点击预览功能

解决的问题&#xff1a;默认的插件在点击预览图片时&#xff0c;总是从第一张图片开始显示&#xff0c;而不是当前点击的这一张&#xff0c;于是便做了下面的优化&#xff0c;使用js记录当前点击图片的索引&#xff0c;再进行预览。 <template><el-carousel indicato…

armlinux-外部中断

s3c2440的中断框图 如果我们单纯配置一个按键的外部中断&#xff0c;就不存在子中断与优先级的问题。 由于是按键的外部中断&#xff0c;通过引脚的高低电平来触发。所以我们要先配置引脚的功能。 我们使用按键1&#xff0c;终端源为EINT8&#xff0c;对应引脚GPG0 通过用户手…

java中大型医院HIS系统源码 Angular+Nginx+SpringBoot云HIS运维平台源码

java中大型医院HIS系统源码 AngularNginxSpringBoot云HIS运维平台源码 云HIS系统是一款满足基层医院各类业务需要的健康云产品。该产品能帮助基层医院完成日常各类业务&#xff0c;提供病患预约挂号支持、病患问诊、电子病历、开药发药、会员管理、统计查询、医生工作站和护士工…

响应跨域的两种方式

第一种&#xff1a; Configuration public class CorsConfication {Beanpublic CorsWebFilter corsWebFilter() {UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource();CorsConfiguration corsConfiguration new CorsConfiguration();//1、配置跨…

【算法刷题day16】Leetcode:104.二叉树的最大深度 559.n叉树的最大深度 111.二叉树的最小深度 222.完全二叉树的节点个数

104.二叉树的最大深度 &#xff08;优先掌握递归&#xff09; 文档链接&#xff1a;[代码随想录] 题目链接&#xff1a;104.二叉树的最大深度 &#xff08;优先掌握递归&#xff09; 状态&#xff1a;ok 题目&#xff1a; 给定一个二叉树 root &#xff0c;返回其最大深度。 二…

(源码+部署+讲解)基于Spring Boot和Vue的大学生快递代取服务平台的设计与实现

一、引言 本报告旨在详细阐述基于Spring Boot后端框架和Vue前端框架的大学生快递代取服务平台的设计与实现过程。该平台旨在为大学生提供便捷的快递代取服务&#xff0c;解决因时间冲突或距离过远而无法及时取件的问题。通过该平台&#xff0c;用户可以发布代取需求&#xff0c…

4核8G服务器配置性能怎么样?4核8G12M配置服务器能干啥?

腾讯云4核8G服务器多少钱&#xff1f;腾讯云4核8G轻量应用服务器12M带宽租用价格646元15个月&#xff0c;活动页面 txybk.com/go/txy 活动链接打开如下图所示&#xff1a; 腾讯云4核8G服务器优惠价格 这台4核8G服务器是轻量应用服务器&#xff0c;详细配置为&#xff1a;轻量4核…

os模块篇(十六)

文章目录 os.eventfd_write(fd, value)os.timerfd_create(clockid, /, *, flags0)os.timerfd_settime(fd, /, *, flagsflags, initial0.0, interval0.0)os.timerfd_settime_ns(fd, /, *, flags0, initial0, interval0)os.timerfd_gettime(fd, /)os.timerfd_gettime_ns(fd, /)os…

【SQL Server】1. 认识+使用

1. 创建数据库的默认存储路径 C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Microsoft SQL Server 2008 R2 当我们选择删除数据库时&#xff0c;对应路径下的文件也就删除了 2. 导入导出数据工具的路径 3. 注册数据库遇到的问题 ??? 目前的问题就是服务器新建…

(源码+部署+讲解)基于Spring Boot和Vue的宠物领养系统的设计与实现

一、引言 本报告旨在详细描述基于Spring Boot后端框架和Vue前端框架的宠物领养系统的设计与实现过程。宠物领养系统旨在为宠物主人和领养者提供一个便捷的平台&#xff0c;实现宠物的信息发布、领养申请、信息管理等功能。通过该系统&#xff0c;宠物主人可以快速找到适合的领养…

php开发实战分析(11):mysql中使用update语句使用CASE WHEN

在PHP中使用MySQL UPDATE语句按条件进行更新数据&#xff0c;如果数据表中state字段为0&#xff0c;则更新为1同时更新字段state_time为当前时间的时间戳&#xff1b;如果state字段为1&#xff0c;则更新为0&#xff0c;同时state_time更新为NULL. // 构造UPDATE语句 $sql &qu…

Github 2024-03-30 Rust开源项目日报 Top10

根据Github Trendings的统计,今日(2024-03-30统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Rust项目10Rust编程语言的可靠异步运行时:Tokio 创建周期:2759 天开发语言:Rust协议类型:MIT LicenseStar数量:24319 个Fork数量:2213 次…

c语言数据结构(10)——冒泡排序、快速排序

欢迎来到博主的专栏——C语言数据结构 博主ID&#xff1a;代码小豪 文章目录 冒泡排序冒泡排序的代码及原理快速排序快速排序的代码和原理快速排序的其他排序方法非递归的快速排序 冒泡排序 相信冒泡排序是绝大多数计科学子接触的第一个排序算法。作为最简单、最容易理解的排序…

【保姆级讲解如何安装与配置Node.js】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…

Vit模型初始化参数。余弦退火(Cosine Annealing)。模型训练。VisualDL。模型测试。

目录 Vit模型初始化参数。 余弦退火(Cosine Annealing)。 模型训练。 VisualDL。

YuanDaiMa2048博客文章总览

YuanDaiMa2048博客文章总览 不定期更新学习中遇到的问题以及学习笔记… 一、基础概念 最新流行IT技术正则化概念及使用正则表达式基本概念正则表达式与正则化[日常使用] Win R[日常使用] Shell常用命令dos和cmd 二、科研工具 [实验室服务器使用]使用VSCode、PyCharm、MobaX…

【JAVA】postman import certificates in project 导入证书pfx

1. 打开这个按钮 2. File ->Settings 3. 打开“certificates”, Add certificates 添加证书 4. 输入证书地址&#xff0c;然后选择证书文件pfx , 输入证书密码。点击添加就可以了。 特别提醒&#xff1a; 推荐本地自己证书验证软件&#xff0c;“KeyStore” 这个软件可以…

富格林:关注正规手段防卫虚假伎俩

富格林悉知&#xff0c;黄金市场瞬息万变&#xff0c;虽然有交易机会&#xff0c;但也伴随着一定的风险。投资者进入市场应学习应对市场风险&#xff0c;避免虚假猫腻的伎俩。尤其是对于刚进入市场的新手投资者&#xff0c;更需要一些实用的、正规的方法来降低损失的概率&#…